程序员人生网站导航

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

栏目：htmlcss时间：2014-05-26 15:57:30

CSS制作很漂亮的文字滑动效果,请查看运行代码演示!

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>建站学院-liehuo.net</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 />救赵挥金锤，邯郸先震惊。千秋二壮士，<script type="text/javascript" src="skin/js/auto_img.js"></script> </div> <div class="_udz26f1p8k"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6783848", container: "_udz26f1p8k", async: true }); </script>  <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div> <div class="news_up"> <div class="l"> <p><b>上一篇</b> <a href="sqlserver/6612.html" >数据库旁显示单一用户问题</a> </p> <p><b>下一篇</b> <a href="seo/6614.html">是什么原因让我在十秒,离开的你网站</a> </p> </div> </div> <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div>  </div> <div class="nav10"></div> </div> </section> <section class="waplist1"> <h2><i></i><em></em>最新技术推荐</h2> <div class="waplist1_box"> <a href="http://m.wfuyu.com/htmlcss/27763.html" class="lb_box" target="_self"> <i class='ys'>1</i>Dynamics 365Online 通过插件中的retrievemultiple消息来过滤产品视图</a> <a href="http://m.wfuyu.com/htmlcss/27676.html" class="lb_box" target="_self"> <i class='ys'>2</i>微信小程序利与弊</a> <a href="http://m.wfuyu.com/htmlcss/27635.html" class="lb_box" target="_self"> <i class='ys'>3</i>（4）Dojo学习之动画学习</a> <a href="http://m.wfuyu.com/htmlcss/27580.html" class="lb_box" target="_self"> <i >4</i>HTML学习</a> <a href="http://m.wfuyu.com/htmlcss/27578.html" class="lb_box" target="_self"> <i >5</i>Jquery实现拖拽可编辑模块</a> <a href="http://m.wfuyu.com/htmlcss/27548.html" class="lb_box" target="_self"> <i >6</i>PHP绿色集成环境共生模式与多开案例，PHPWAMP多档位综合教程。</a> <a href="http://m.wfuyu.com/htmlcss/27530.html" class="lb_box" target="_self"> <i >7</i>谷哥的小弟学前端(03)——CSS基础知识（1）</a> </header> <div class="_udz26f1p8k"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6783848", container: "_udz26f1p8k", async: true }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> <footer class="copyRight"> <p class="copy-1"> <a href="http://m.wfuyu.com/">回到首页</a><i></i> <a href="http://m.wfuyu.com/help/show/8.html">联系我们</a><i></i> <a href="/htmlcss/6613.html#top">返回顶部</a><i></i> <a style="width:56px; height:12px;" href="http://www.wfuyu.com/?b=topc"> <img src="http://m.wfuyu.com/skin/images/computer_03.png"> </a> </p> <p class="copy-2"><span> 程序员人生官网<br/>中国最全IT社区平台<br/> 粤ICP备14040726号-1 </span></p> </footer> <div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?052c8cb26e054cc327229ac4670ce08c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>