這是我在CSDN上看到的一篇文章中寫到的:
電腦上看文章比較喫力主要原因有以下兩點:
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,讓他支持更多的瀏覽器。