CSS制作很漂亮的文字滑动效果-TBECtis-ChinaUnix博客

reahat,linux86415

首页　| 　博文目录　| 　关于我

TBECtis

博客访问： 1850355
博文数量： 699
博客积分： 6000
博客等级：准将
技术积分： 4970
用户组：普通用户
注册时间： 2008-10-15 13:45

文章分类

全部博文（699）

未分配的博文（699）

文章存档

2011年（1）

2008年（698）

我的朋友

最近访客

推荐博文

CSS制作很漂亮的文字滑动效果

分类：

2008-10-15 13:46:22

制作很漂亮的文字滑动效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <style type="text/css">  </style> <script type="text/javascript"> //<![CDATA[ window.onload = function() { rolinTab("rolin") } function rolinTab(obj) { var list = $(obj).getElementsByTagName("LI"); var state = {show:false,hidden:false,showObj:false}; for (var i=0; i<list.length; i++) { var tmp = new rolinItem(list[i],state); if (i == 0) tmp.pShow(); } } function rolinItem(obj,state) { var speed = 0.0666; var range = 1; var interval; var tarH; var tar = this; var head = getFirstChild(obj); var content = getNextChild(head); var isOpen = false; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = content.offsetHeight; content.style.display = "none"; var isOpen = false; head.onmouseover = function() { this.style.background = "#EFEFEF"; } head.onmouseout = mouseout; head.onclick = function() { this.style.background = "#EFEFEF"; if (!state.show && !state.hidden) { if (!isOpen) { head.onmouseout = null; show(); } else { hidden(); } } } function mouseout() { this.style.background = "#FFF" } function show() { head.style.borderBottom = "1px solid #DADADA"; state.show = true; if (state.openObj && state.openObj != tar ) { state.openObj.pHidden(); } content.style.height = "0px"; content.style.display = "block"; content.style.overflow = "hidden"; state.openObj = tar; tarH = baseH; interval = setInterval(move,10); } function showS() { isOpen = true; state.show = false; } function hidden() { state.hidden = true; tarH = 0; interval = setInterval(move,10); } function hiddenS() { head.style.borderBottom = "none"; head.onmouseout = mouseout; head.onmouseout(); content.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - content.style.height.pxToNum())*speed; if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1; content.style.height = (content.style.height.pxToNum() + dist) + "px"; if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) { clearInterval(interval); content.style.height = tarH + "px"; if (tarH != 0) { showS() } else { hiddenS(); } } } } var $ = function($) {return document.getElementById($)}; String.prototype.pxToNum = function() {return Number(this.replace("px",""))} function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; } //]]> </script> <body> <ul class="rolinList" id="rolin"> <li> <h2>花郎徒结</h2> <div class="content"><p>当时明月在,曾照彩云归<br /><br /> 倦了红颜，憔悴为千年，几多情深夜语，一点听风悠然。<br /> 村忆梦回，飘逸如烟，友别怜影单。<br /> 而今沙漠风闲，雪原清冷，东海云淡，石谷谁惜缘。<br /> 累了心间，问也还烦，都道风沙淘尽，何日再慰别缘！ </p></div> </li> <li> <h2>帝王槌</h2> <div class="content"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br /> 问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 <br /> 须发苍,气轩昂,三尺银狼,破风动八方.　 <br /> 依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p></div> </li> <li> <h2>玉女枪法</h2> <div class="content"><p>曾经有个梦想：驰骋江湖，快意恩仇。<br /> 曾经有份愿望：千里追凶，十步溅血。<br /> 曾经有腔豪情：奇功盖世，名冠武林。<br /> 曾经有种期盼：烛影摇红，衣袖添香。</p></div> </li> <li> <h2>黑沙刚体</h2> <div class="content"><p>赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。 <br /> 十步杀一人，千里不留行。事了拂衣去，深藏身与名。 <br /> 闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。 <br /> 三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。 <br /> 救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。 <br /> 纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。</p> </div> </li> <li> <h2>不羁浪人枪</h2> <div class="content"><p>素手相牵，斜辉入眼帘，一轮逍遥自在间，醉了山水闲。<br /> 沙漠绿水涟，鱼游浅底，明眸一水天。<br /> 爱在村友相谈，开心点点，笑语连连，率性夜无眠。<br /> 月在西边，风乱星寒，辗转醇香旧事，蛾儿曼舞灯前。</p></div> </li> <li> <h2>雾水掌</h2> <div class="content"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br /> 又有谁在这残阳道中追逐它的身影... </p> </div> </li> </ul> <script type="text/javascript" src="/js/jquery.qqFace.js"></script> </body> </html>

Ctrl+A 全部选择提示：你可先修改部分代码，再按运行

--------------------next---------------------

阅读(382) | 评论(0) | 转发(0) |

上一篇：try-catch用法和含义

下一篇：ASP.NET 1.1 ListBox的注意事项_Asp.net教程_.Net教程_Vb.net教程_Vc.net_C#编程

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6