回来主页  设为主页            资源已找到,加载中...... 请稍等!         网站地图 | 文娱网  | 科技吧  | google地图  

网站主页网络学院威廉希尔williamhill东西网络红人酷站引荐左右博客网站东西虚拟国际明升m88.com抢手事情
文章 图片
高档查找
JS+CSS文章检查体系
点击数:158 更新时刻:2009-10-10 16:53:18 | 【字体:

电脑上看文章比较费劲首要原因有以下两点:

1.这一点最重要:电脑屏幕大。相同长度的文字,在电脑上或许拉得很宽,可是行数很少,是一个大长条;在手机上便是一个方块。因而,在电脑上看,人的眼球需求滚动很大的起伏才干读完一行;而手机上,关于母语汉语来说,能够一扫而过,阅览速度大大提高。其实看纸质文本也是一个道理,咱们平常看杂志读报纸,没有哪一页不分栏吧?

2.在电脑上读网页上的文字,很简略涣散注意力,由于处处都是超链接,常常要抵挡去点它们的激动,而且看上去很乱。而手机阅览纯文本要简略得多,咱们的注意力能够会集在文字以及其所要表达的含义。不过这一点经过操控自己是能够做到的。

3.网页北京色一般为白色,而字体为黑色,对比度过于激烈损害视力,而且字体大小款式等不能够重设影响阅览作用。

 

 


自己写了个JS+CSS的小东西,用来看提高用户体会的。

Name:WindowsTextShow;

做成一个衔接:点击后履行JavaScript函数;

Function: WindowsTextShow(Id  div.id);

div.id 为要展现文本的div的ID;

 

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
        <style type="text/css">
        #divback
        {
            width: 100%;
            height: expression(body.scrollHeight);
            background-color: #000;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 49;
            display: none;
            filter: progid:DXImageTransform.Microsoft.Alphaopacity=25;
            filter: alpha(opacity=55);
        }
        .WindowsTextShow
        {
            top: expression(documentElement.scrollTop + 50);
            left: 50px;
            height: expression(documentElement.clientHeight - 50*2);
            width: expression(body.clientWidth-50*2);
            position: absolute;
            z-index: 50;
            color: Black;
            border: 3px solid #E5E5E5;
            background-color: #F0F0F0;
        }
        .WindowsTextShowFull
        {
            top: expression(documentElement.scrollTop);
            left: 0px;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 50;
            border: 3px solid #E5E5E5;
            background-color: #F0F0F0;
        }
        #textContent
        {
            padding: 5px;
            height: 80%;
            overflow: auto;
            line-height: normal;
            font-size: 14px;
            color: Black;
            background-color: White;
        }
        #ctrlSet
        {
            font-size: 12px;
        }
        .ctrlSetState
        {
            display: block;
        }
    </style>

    <script charset="GB2312" language="javascript" type="text/javascript">
        var ocolorPopup = window.createPopup();
        var ecolorPopup = null;
        var isfullScreen = false;
        var isRunning = false;
        var isCtrlSetShow = true;
        var div_box = document.createElement("DIV");
        var div_back = document.createElement("DIV");
        var textwindowtop = 50 + document.documentElement.scrollTop;
        var textwindowleft = 50;
        function colordialogmouseout(obj) {
            obj.style.borderColor = "";
            obj.bgColor = "";
        }

        function colordialogmouseover(obj) {
            obj.style.borderColor = "#0A66EE";
            obj.bgColor = "#EEEEEE";
        }

        function colordialogmousedown(color) {
            ecolorPopup.value = color;
            if (GetRadioValue("colorType") == "textColor") {
                textContent.style.color = color;
            }
            else if (GetRadioValue("colorType") == "textbackColor") {
                textContent.style.backgroundColor = color;
            }
            else {
                divback.style.backgroundColor = color;
            }
            ocolorPopup.document.body.blur();
        }
        function colorset() {
            if (window.event.keyCode == 13) {
                if (iscolor()) {
                    ecolorPopup.value = document.getElementById("setcolorbox").value;
                    if (GetRadioValue("colorType") == "textColor") {
                        textContent.style.color = ecolorPopup.value;
                    }
                    else if (GetRadioValue("colorType") == "textbackColor") {
                        textContent.style.backgroundColor = ecolorPopup.value;
                    }
                    else {
                        divback.style.backgroundColor = ecolorPopup.value;
                    }
                }
                ocolorPopup.document.body.blur();
            }
        }

        function iscolor() {
            var pattern = /^#[0-9a-fA-F]{6}$/
            var objvalue = document.getElementById("setcolorbox").value;
            if (objvalue.match(pattern) != null) {
                return true;
            }
            else {
                return false;
            }
        }
        function colordialogmore() {
            var sColor = dlgHelper.ChooseColorDlg(ecolorPopup.value);
            sColorsColor = sColor.toString(16);
            if (sColor.length < 6) {
                var sTempString = "000000".substring(0, 6 - sColor.length);
                sColor = sTempString.concat(sColor);
            }
            ecolorPopup.value = "#" + sColor.toUpperCase();
            //document.body.bgColor="#"+sColor.toUpperCase(); 
            ocolorPopup.document.body.blur();
        }

        function colordialog() {
            var e = event.srcElement;
            e.onkeyup = colordialog;
            eecolorPopup = e;
            var ocbody;
            var oPopBody = ocolorPopup.document.body;
            var colorlist = new Array(40);
            var colordialogw = 158;
            var colordialogh = 147
            var colordialogx = e.offsetLeft + textwindowleft - 7;
            var colordialogy = e.offsetTop + textwindowtop - colordialogh - 10;
            oPopBody.style.backgroundColor = "#f9f8f7";
            oPopBody.style.border = "solid #999999 1px";
            oPopBody.style.fontSize = "12px";

            colorlist[0] = "#000000"; colorlist[1] = "#993300"; colorlist[2] = "#333300"; colorlist[3] = "#003300";
            colorlist[4] = "#003366"; colorlist[5] = "#000080"; colorlist[6] = "#333399"; colorlist[7] = "#333333";
            colorlist[8] = "#800000"; colorlist[9] = "#FF6600"; colorlist[10] = "#808000"; colorlist[11] = "#008000";
            colorlist[12] = "#008080"; colorlist[13] = "#0000FF"; colorlist[14] = "#666699"; colorlist[15] = "#808080";
            colorlist[16] = "#FF0000"; colorlist[17] = "#FF9900"; colorlist[18] = "#99CC00"; colorlist[19] = "#339966";
            colorlist[20] = "#33CCCC"; colorlist[21] = "#3366FF"; colorlist[22] = "#800080"; colorlist[23] = "#999999";
            colorlist[24] = "#FF00FF"; colorlist[25] = "#FFCC00"; colorlist[26] = "#FFFF00"; colorlist[27] = "#00FF00";
            colorlist[28] = "#00FFFF"; colorlist[29] = "#00CCFF"; colorlist[30] = "#993366"; colorlist[31] = "#CCCCCC";
            colorlist[32] = "#FF99CC"; colorlist[33] = "#FFCC99"; colorlist[34] = "#FFFF99"; colorlist[35] = "#CCFFCC";
            colorlist[36] = "#CCFFFF"; colorlist[37] = "#99CCFF"; colorlist[38] = "#CC99FF"; colorlist[39] = "#FFFFFF";

            ocbody = "";
            ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
            ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + e.value + "\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当时色彩</td></tr>";
            for (var i = 0; i < colorlist.length; i++) {
                if (i % 8 == 0)
                    ocbody += "<tr>";
                ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('" + colorlist[i] + "')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\"" + colorlist[i] + "\"><tr><td></td></tr></table></td>";
                if (i % 8 == 7)
                    ocbody += "</tr>";
            }
            //ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它色彩...</td></tr>";
            ocbody += "</table>";
            oPopBody.innerHTML = ocbody;
            ocolorPopup.show(colordialogx, colordialogy, colordialogw, colordialogh, document.body);
        }
        //-->
        function WindowsTextShow(divid) {
            if (!isRunning) {
                WindowsTextInit(divid);
                isRunning = true;
            }
            SetWindows();

        }
        function SetWindows() {
            textwindowtop = 50 + document.documentElement.scrollTop;
            textwindowleft = 50;
            div_back.style.display = 'block';
            div_back.style.visibility = 'visible';
            div_box.style.display = 'block';
            div_box.className = "WindowsTextShow";
        }
        function RefreshWin() {
            textwindowtop = 50 + document.documentElement.scrollTop;
            textwindowleft = 50;
        }
        function WindowsTextInit(divid) {
            var div_ctrlSet = document.createElement("DIV");
            var div_textContent = document.createElement("DIV");
            div_ctrlSet.id = "ctrlSet";
            div_textContent.id = "textContent";
            div_box.id = "WindowsTextShow";
            div_box.className = "WindowsTextShow";
            div_back.id = "divback";

            WindowsTextAddObj(div_box, div_textContent);
            WindowsTextAddObj(div_box, div_ctrlSet);
            SetObjContent(div_textContent, document.getElementById(divid).innerHTML);
            SetObjContent(div_ctrlSet, "<div id='typeSet'>挑选更改项:<input checked='checked' name='colorType' type='radio' value='textColor' />文字<input name='colorType' type='radio' value='textbackColor' />布景<input name='colorType' type='radio' value='backGroundColor' />隐瞒物</div>");
            SetObjContent(div_ctrlSet, "<div id='colorSet'>挑选色彩:<input id='setcolorbox' name='sel1' type='text' onkeydown='colorset()' onfocus='colordialog()'/></div>");
            SetObjContent(div_ctrlSet, "<div id='fontSizeSet'>挑选字体:<select name='select' id='fontslt' onChange='SetFont(textContent)'><option selected>挑选阅览字体</option></select></div>");
            SetObjContent(div_ctrlSet, "<div id='fullScreenSet'>全屏切换:<input type='button' onclick='FullScreen()' id='fullScreen' name='fullScreen' value='FullScreen'/></div>");
            SetObjContent(div_ctrlSet, "<div id='hiddenCtrSet'>躲藏设置:<input type='button' onclick='HiddenCtrlSet()' name='HiddenCtrlSet' value='HiddenCtrlSet'/></div>");
            SetObjContent(div_ctrlSet, "<div id='closeSet'>封闭窗口:<input type='button' onclick='CloseWindows()' name='CloseWindows' value='CloseWindows'/></div>");
            document.body.appendChild(div_back);
            document.body.appendChild(div_box);
            SelectAddObj();
        }
        function HiddenCtrlSet() {
            if (isCtrlSetShow) {
                document.getElementById("typeSet").style.display = "none";
                document.getElementById("colorSet").style.display = "none";
                document.getElementById("fontSizeSet").style.display = "none";
                document.getElementById("fullScreenSet").style.display = "none";
                isCtrlSetShow = false;
            }
            else {
                document.getElementById("typeSet").style.display = "block";
                document.getElementById("colorSet").style.display = "block";
                document.getElementById("fontSizeSet").style.display = "block";
                document.getElementById("fullScreenSet").style.display = "block";
                isCtrlSetShow = true;
            }

        }
        function FullScreen() {
            if (isfullScreen) {
                isfullScreen = false;
                textwindowtop += 50;
                textwindowleft += 50;
                div_box.className = "WindowsTextShow";
                document.getElementById("fullScreen").value = "FullScreen";
            }
            else {
                isfullScreen = true;
                textwindowtop -= 50;
                textwindowleft -= 50;
                div_box.className = "WindowsTextShowFull";
                document.getElementById("fullScreen").value = "DefaultScreen";
            }
        }
        function GetIEHeight() //函数:获取尺度
        {
            var winHeight = 0;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                winHeight = document.documentElement.clientHeight;
            }
            return winHeight;
        }

        function GetRadioValue(ids) {
            var obj = document.getElementsByName(ids);
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) {
                    return obj[i].value;
                }
            }
        }
        function SetFont(winid) {
            if ((fontslt.selectedIndex != -1) && (fontslt.selectedIndex != 0)) {
                winid.style.fontSize = fontslt.options[fontslt.selectedIndex].value;
            }
        }
        function SelectAddObj() {
            for (i = 9; i < 51; i++) {
                var varItem = new Option(i + "pt字体", i);
                document.getElementById("fontslt").options.add(varItem);
            }
        }

        function SetObjContent(ids, obj) {
            ids.innerHTML += obj;
        }
        function WindowsTextAddObj(ids, obj) {
            ids.appendChild(obj);
        }
        function CloseWindows() {
            div_back.style.display = 'none';
            div_box.style.display = 'none';
            div_box.className = "WindowsTextShow";
            div_back.style.visibility = 'hidden';
            isfullScreen = false;
            document.getElementById("fullScreen").value = "FullScreen";
        }    
    </script>
</head>
<body>
<div style=" width:900px; height:1400px; background-color:Gray; margin:0 auto;">
    <div style=" height:100px; background-color:Red;"></div>
    <div style=" height:1200px; background-color:Black;">
        <div style="width:75%; float:left;">
            <div style="height:100px; background-color:Blue;">
            《跑跑卡丁车》国内运营商裁人超30%
            <a href="javascript:WindowsTextShow('textBox')">看文字</a>
            </div>
            <div id="textBox" style="height:1100px; background-color:White;">
                卡丁车“熄火” 网游冬意渐增

  本报记者 刘方远 

  毕业生小王(化名)近来陷入了找工作的奔走之中。不久前,他还以为投身声称“反经济周期”的网游职业,能让他在这轮隆冬中得以自保。

  “公司从这个月初开端裁减人员,陆陆续续几批共约一百多人,占公司总人数的30%到40%。”小王是乐线软件开发(上海)有限公司本年新招的职工,该公司是韩国网游厂商Nexon在我国的分公司,旗下有《跑跑卡丁车》等闻名网络游戏。

  据悉,《跑跑卡丁车》在国内休闲游戏范畴一向独占鳌头,为运营商带来的收入相当可观。由于网游对金融环境具有避风港效应,此前,国内网游厂商纷繁对该职业表明了达观,乐线软件为何在此时挑选了大起伏“减肥”?

  12月24日,记者就此事向乐信软件求证,乐线软件管理中心一位韩方负责人向记者表明,公司现在不方便对此进行表态。

  阵线调整?

  乐信软件的母公司Nexon在国内小有名气,早年隆重网络署理的休闲游戏《泡泡堂》便是出自Nexon之手。看到《泡泡堂》在我国商场的巨大成功后,Nexon随后抛弃了与隆重协作,独立成立了乐信软件在我国运营《跑跑卡丁车》等休闲游戏。

  据网游业界知情人士介绍,《跑跑卡丁车》现在的运营渠道名为世纪天成,由上海邮通和乐线软件一起建立,“外界所知的‘世纪天成’实践操控方便是乐线软件。”除了《跑跑卡丁车》外,世纪天成运营的游戏还有《洛奇》、《新天翼之链》、《天关战纪》、《反恐精英Online》等。

  《洛奇》是在国内上线的第一款游戏,但反响平平,但自2006年正式在国内推出《跑跑卡丁车》以来,公司开端呈现起色。一位网游业界人士奉告记者,仅跑跑卡丁车一款游戏,最高一个月就能带来近千万收入,不过世纪天成的其它游戏商场体现仍很一般。

  12月12日,世纪天成在《天关战纪》及《新天翼之链》这两款网游官网上一起发出了“停止运营布告”,称这两款游戏的一切服务器都将于12月30日10:00封闭。

  对此,小王奉告记者,这或许便是公司此次减缩职工的原因,由于一些老游戏成绩下滑,公司要转型,加上还有新游戏要上线,所以要做大规模调整。

  还有知情人士奉告记者,世纪天成此次的人员调整触及许多中高层人员,“许多第一批做《洛奇》、《卡丁车》的人都走了,或许是韩方因经济危机进行的调整。”

  据悉,《反恐精英Online》便是世纪天成近期上市测验的一款新游戏,“尽管这款游戏在韩国的体现并不好,但由于国内有比韩国更多的CS玩家根底,因而这款游戏被他们寄予厚望。”

  网游有没有冬季?

  事实上,一些国际级游戏巨子也开端了“减肥”。

  12月开端,美国闻名游戏开发商EA(艺电)公司宣告,公司将再裁人400人,加上10月份的裁人方案,裁人人数将达1000人,约占职工总数的10%。

  不过,业界专家以为,由于EA首要仍是依托传统的单机游戏形式,而且面临的是西方老练商场,因而受经济环境影响较大,而我国的网络游戏商场由于还处在增加阶段,因而受到冲击较小。

  对此,隆重、伟人、第九城市等方面都向记者表达了相似的观念——网游归于廉价文娱,经济危机导致的收入下降,短期内不太或许影响低消费的文娱项目,因而并没有看到商场大幅萎缩。

  “对现已上市的大网游企业而言,这轮经济形势带来的影响并不大,一是由于产品现已比较老练,二是有足够的资金。”第九城市总裁陈晓薇向记者表明,现在九城的要点便是施行多元化的产品战略,完善针对不同需求的涣散依托单一产品线的危险。

  据商场调查公司艾瑞咨询称,我国网络游戏运营商在本年第三季度的收入总和同比增加了50%以上,到达近8亿美元,一起本季度网络游戏商场的增加势头仍很微弱。

  不过,关于没有上市的中小网游厂商而言,日子的确开端变得伤心起来,由于小工作室很难再拿到出资,进一步的研制投入断粮后,小工作室的未来将难以为继。一家中型网游公司的负责人奉告记者,“近期一些大的扩张方案都暂时停滞了,只能依托已有的游戏维持现状。”

            </div>
        </div>
        <div style="width:25%; float:left;"></div>
    </div>
    <div style=" height:100px; background-color:Red;"></div>
</div>

</body>
</html>
其实像CSDN这种文章类网站彻底应该选用一下,挺有用的。

下面是我做的两个演示,其间一个借用CSDN网站,能够看看假如CSDN加上后的作用。

http://bbs.blueidea.com/thread-2904382-1-1.html


咱们能够试试,现在只支撑IE我是在IE7下做的,有爱好的自己能够做css hack,让他支撑更多的浏览器。

 

 

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体:
     网友谈论:(只显示最新10条。谈论内容只代表网友观念,与本站态度无关!)
     

    相关文章
    没有相关文章
    最新引荐最新抢手
    专题栏目
       
    威廉希尔williamhill吧