JS CSS文章查看系統(tǒng)

更新時(shí)間：2008年12月29日 23:56:57 作者：

自己寫了個(gè)JS+CSS的小東西，用來看提升用戶體驗(yàn)的。 Name：WindowsTextShow；

做成一個(gè)連接：點(diǎn)擊后執(zhí)行JavaScript函數(shù)；
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); sColor = 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; ecolorPopup = 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\">當(dāng)前顏色</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   class="cdfierd"   id='typeSet'>選擇更改項(xiàng)：<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   class="3irtqdg"   id='colorSet'>選擇顏色：<input id='setcolorbox' name='sel1' type='text' onkeydown='colorset()' onfocus='colordialog()'/></div>"); SetObjContent(div_ctrlSet, "<div   class="lactfwj"   id='fontSizeSet'>選擇字體：<select name='select' id='fontslt' onChange='SetFont(textContent)'><option selected>選擇閱讀字體</option></select></div>"); SetObjContent(div_ctrlSet, "<div   class="2anugco"   id='fullScreenSet'>全屏切換：<input type='button' onclick='FullScreen()' id='fullScreen' name='fullScreen' value='FullScreen'/></div>"); SetObjContent(div_ctrlSet, "<div   class="jv7vcz7"   id='hiddenCtrSet'>隱藏設(shè)置：<input type='button' onclick='HiddenCtrlSet()' name='HiddenCtrlSet' value='HiddenCtrlSet'/></div>"); SetObjContent(div_ctrlSet, "<div   class="zrtbovp"   id='closeSet'>關(guān)閉窗口：<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() //函數(shù)：獲取尺寸 { 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;"> 《跑跑卡丁車》國內(nèi)運(yùn)營商裁員超30% <a href="javascript:WindowsTextShow('textBox')">看文字</a> </div> <div   class="8aik2km"   id="textBox" style="height:1100px; background-color:White;"> 卡丁車"熄火" 網(wǎng)游冬意漸增 　　本報(bào)記者 劉方遠(yuǎn) 　　畢業(yè)生小王(化名)近日陷入了找工作的奔波之中。不久前，他還以為投身號(hào)稱"反經(jīng)濟(jì)周期"的網(wǎng)游行業(yè)，能讓他在這輪寒冬中得以自保。 　　"公司從這個(gè)月初開始裁減人員，陸陸續(xù)續(xù)幾批共約一百多人，占公司總?cè)藬?shù)的30%到40%。"小王是樂線軟件開發(fā)(上海)有限公司今年新招的員工，該公司是韓國網(wǎng)游廠商N(yùn)exon在中國的分公司，旗下有《跑跑卡丁車》等知名網(wǎng)絡(luò)游戲。 　　據(jù)悉，《跑跑卡丁車》在國內(nèi)休閑游戲領(lǐng)域一直名列前茅，為運(yùn)營商帶來的收入相當(dāng)可觀。由于網(wǎng)游對(duì)金融環(huán)境具有避風(fēng)港效應(yīng)，此前，國內(nèi)網(wǎng)游廠商紛紛對(duì)該行業(yè)表示了樂觀，樂線軟件為何在此刻選擇了大幅度"瘦身"？ 　　12月24日，記者就此事向樂信軟件求證，樂線軟件管理中心一位韓方負(fù)責(zé)人向記者表示，公司目前不便對(duì)此進(jìn)行表態(tài)。 　　戰(zhàn)線調(diào)整？ 　　樂信軟件的母公司Nexon在國內(nèi)小有名氣，早年盛大網(wǎng)絡(luò)代理的休閑游戲《泡泡堂》便是出自Nexon之手。看到《泡泡堂》在中國市場(chǎng)的巨大成功后，Nexon隨后放棄了與盛大合作，獨(dú)立成立了樂信軟件在中國運(yùn)營《跑跑卡丁車》等休閑游戲。 　　據(jù)網(wǎng)游業(yè)界知情人士介紹，《跑跑卡丁車》現(xiàn)在的運(yùn)營平臺(tái)名為世紀(jì)天成，由上海郵通和樂線軟件共同搭建，"外界所知的'世紀(jì)天成'實(shí)際控制方便是樂線軟件。"除了《跑跑卡丁車》外，世紀(jì)天成運(yùn)營的游戲還有《洛奇》、《新天翼之鏈》、《天關(guān)戰(zhàn)紀(jì)》、《反恐精英Online》等。 　　《洛奇》是在國內(nèi)上線的第一款游戲，但反應(yīng)平平，但自2006年正式在國內(nèi)推出《跑跑卡丁車》以來，公司開始出現(xiàn)轉(zhuǎn)機(jī)。一位網(wǎng)游業(yè)內(nèi)人士告訴記者，僅跑跑卡丁車一款游戲，最高一個(gè)月就能帶來近千萬收入，不過世紀(jì)天成的其它游戲市場(chǎng)表現(xiàn)仍很一般。 　　12月12日，世紀(jì)天成在《天關(guān)戰(zhàn)紀(jì)》及《新天翼之鏈》這兩款網(wǎng)游官網(wǎng)上同時(shí)發(fā)出了"終止運(yùn)營公告"，稱這兩款游戲的所有服務(wù)器都將于12月30日10:00關(guān)閉。 　　對(duì)此，小王告訴記者，這也許就是公司此次縮減員工的原因，因?yàn)橐恍├嫌螒驑I(yè)績(jī)下滑，公司要轉(zhuǎn)型，加上還有新游戲要上線，所以要做大規(guī)模調(diào)整。 　　另有知情人士告訴記者，世紀(jì)天成此次的人員調(diào)整涉及大量中高層人員，"很多第一批做《洛奇》、《卡丁車》的人都走了，可能是韓方因經(jīng)濟(jì)危機(jī)進(jìn)行的調(diào)整。" 　　據(jù)悉，《反恐精英Online》便是世紀(jì)天成近期上市測(cè)試的一款新游戲，"雖然這款游戲在韓國的表現(xiàn)并不好，但由于國內(nèi)有比韓國更多的CS玩家基礎(chǔ)，因此這款游戲被他們寄予厚望。" 　　網(wǎng)游有沒有冬天？ 　　事實(shí)上，一些國際級(jí)游戲巨頭也開始了"瘦身"。 　　12月開始，美國知名游戲開發(fā)商EA(藝電)公司宣布，公司將再裁員400人，加上10月份的裁員計(jì)劃，裁員人數(shù)將達(dá)1000人，約占員工總數(shù)的10%。 　　不過，業(yè)內(nèi)專家認(rèn)為，由于EA主要仍是依靠傳統(tǒng)的單機(jī)游戲模式，并且面對(duì)的是西方成熟市場(chǎng)，因此受經(jīng)濟(jì)環(huán)境影響較大，而中國的網(wǎng)絡(luò)游戲市場(chǎng)由于還處在增長(zhǎng)階段，因此受到?jīng)_擊較小。 　　對(duì)此，盛大、巨人、第九城市等方面都向記者表達(dá)了類似的觀點(diǎn)——網(wǎng)游屬于廉價(jià)娛樂，經(jīng)濟(jì)危機(jī)導(dǎo)致的收入下降，短期內(nèi)不太可能影響低消費(fèi)的娛樂項(xiàng)目，因此并沒有看到市場(chǎng)大幅萎縮。 　　"對(duì)已經(jīng)上市的大網(wǎng)游企業(yè)而言，這輪經(jīng)濟(jì)形勢(shì)帶來的影響并不大，一是因?yàn)楫a(chǎn)品已經(jīng)比較成熟，二是有充足的資金。"第九城市總裁陳曉薇向記者表示，目前九城的重點(diǎn)就是實(shí)施多元化的產(chǎn)品策略，完善針對(duì)不同需求的分散依賴單一產(chǎn)品線的風(fēng)險(xiǎn)。 　　據(jù)市場(chǎng)調(diào)查公司艾瑞咨詢稱，中國網(wǎng)絡(luò)游戲運(yùn)營商在今年第三季度的收入總和同比增長(zhǎng)了50%以上，達(dá)到近8億美元，同時(shí)本季度網(wǎng)絡(luò)游戲市場(chǎng)的增長(zhǎng)勢(shì)頭仍很強(qiáng)勁。 　　不過，對(duì)于沒有上市的中小網(wǎng)游廠商而言，日子確實(shí)開始變得難過起來，因?yàn)樾」ぷ魇液茈y再拿到投資，進(jìn)一步的研發(fā)投入斷糧后，小工作室的未來將難以為繼。一家中型網(wǎng)游公司的負(fù)責(zé)人告訴記者，"近期一些大的擴(kuò)張計(jì)劃都暫時(shí)擱淺了，只能依靠已有的游戲維持現(xiàn)狀。" </div> </div> <div style="width:25%; float:left;"></div> </div> <div style=" height:100px; background-color:Red;"></div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

像藍(lán)色理想首頁的文章完全可以采用一下，挺實(shí)用的。
大家可以試試，現(xiàn)在只支持IE我是在IE7下做的，有興趣的自己可以做css hack，讓他支持更多的瀏覽器。