JS CSS文章查看系统

做成一个连接：点击后执行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）; 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">当前颜色</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, "选择更改项：<input checked="checked" name="colorType" type="radio" value="textColor" />文字<input name="colorType" type="radio" value="textbackColor" />背景<input name="colorType" type="radio" value="backGroundColor" />遮盖物"）; SetObjContent（div_ctrlSet, "选择颜色：<input id="setcolorbox" name="sel1" type="text" onkeydown="colorset（）" onfocus="colordialog（）"/>"）; SetObjContent（div_ctrlSet, "选择字体：<select name="select" id="fontslt" onChange="SetFont（textContent）"><option selected>选择阅读字体</option></select>"）; SetObjContent（div_ctrlSet, "全屏切换：<input type="button" onclick="FullScreen（）" id="fullScreen" name="fullScreen" value="FullScreen"/>"）; SetObjContent（div_ctrlSet, "隐藏设置：<input type="button" onclick="HiddenCtrlSet（）" name="HiddenCtrlSet" value="HiddenCtrlSet"/>"）; SetObjContent（div_ctrlSet, "关闭窗口：<input type="button" onclick="CloseWindows（）" name="CloseWindows" value="CloseWindows"/>"）; 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>《跑跑卡丁车》国内运营商裁员超30% 看文字 卡丁车"熄火" 网游冬意渐增   本报记者 刘方远   毕业生小王（化名）近日陷入了找工作的奔波之中。不久前，他还以为投身号称"反经济周期"的网游行业，能让他在这轮寒冬中得以自保。   "公司从这个月初开始裁减人员，陆陆续续几批共约一百多人，占公司总人数的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亿美元，同时本季度网络游戏市场的增长势头仍很强劲。   不过，对于没有上市的中小网游厂商而言，日子确实开始变得难过起来，因为小工作室很难再拿到投资，进一步的研发投入断粮后，小工作室的未来将难以为继。一家中型网游公司的负责人告诉记者，"近期一些大的扩张计划都暂时搁浅了，只能依靠已有的游戏维持现状。" </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
像蓝色理想首页的文章完全可以采用一下，挺实用的。
大家可以试试，现在只支持IE我是在IE7下做的，有兴趣的自己可以做css hack，让他支持更多的浏览器。