JS CSS文章查看系统
作者:微光时间:2026-10-23 11:05:35浏览:239
本文介绍一个基于JavaScript和CSS的文章查看系统。通过绑定点击事件触发指定函数,利用DOM操作显示指定ID的div内容。代码示例展示了HTML结构及交互逻辑,并指出该系统在IE7环境下测试通过,建议通过CSS Hack扩展浏览器兼容性。
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> </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% 看文字 </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>[[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]]
像蓝色理想首页的文章完全可以采用一下,挺实用的。
大家可以试试,现在只支持IE我是在IE7下做的,有兴趣的自己可以做css hack,让他支持更多的浏览器。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
