您当前位置：首页 > web前端 > htmlcss > CSS制作很漂亮的文字滑动效果

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

来源：程序员人生发布时间：2014-05-26 15:57:30 阅读次数：2757次

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 />救赵挥金锤，邯郸先震惊。千秋二壮士， <div style=" height:300px; width:600px; margin:0 auto; text-align:center; font: bold 14px/20px;"> 生活不易，码农辛苦<br> 如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠<br> <img src="http://www.wfuyu.com/skin/images/weixin.png" height="200px" width="200px" alt="程序员人生"> </div> </div>  <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 class="r"> <div class="fxd">分享到:</div> <div data-bd-bind="1451183468798" class="bdsharebuttonbox bdshare-button-style0-32"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["weixin","qzone","tsina","douban","tieba"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","qzone","tsina","douban","tieba"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div>  <script type="text/javascript"> var cpro_id="u2646824"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"680",rsi1:"450",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"} </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> <script> //右侧冻结 window.onload=function(){ var navFixed=document.getElementById('r_top'); var navscroll=navFixed.offsetTop; window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; if(scrollTop>navscroll){ navFixed.style.position='fixed'; navFixed.style.top='0'; }else{ navFixed.style.position=''; navFixed.style.top=''; } } }; </script> <div class="content_r" > <div class="content_r" id="r_top"> <div class="right_member_info"> <div class="right_member_info_con"> <div class="right_member_img left"><img src="upload/images/2016/01/21/20160156a0e5e4a18bb.jpg" alt="为码而活"/></div> <div class="right_member_j left"> <div class="m_nic"><div class="user_level lv2"></div><a href="http://www.wfuyu.com/home/1/" target="_blank">为码而活</a></div> <div class="m_jifen" left>积分：<span class="red">4237</span></div> </div> </div> <div class="right_member_guanzhu" id="guanzhu"> <a class="user_guanzhu" href="javascript:void(0);" onclick="add_follow(1)"></a> </div> <div class="m_fs"> <div class="m_ifans"><span>15</span>粉丝</div> <div class="m_guanzhu"><span>7</span>关注</div> </div> </div> <div class="nav10"></div> <div class="content_right_title"> <div class="left">栏目热点</div> </div> <div class="list_text"> <ul> <li><a target="_blank" href="htmlcss/20687.html">three.js 源码注释（二十八）Cameras/Camera.js</a></li> <li><a target="_blank" href="htmlcss/23380.html">remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点</a></li> <li><a target="_blank" href="htmlcss/5999.html">JSP结合XML+XSLT将输出转换HTML</a></li> <li><a target="_blank" href="htmlcss/7023.html">CSS入门技巧：关于CSS样式表的教程</a></li> <li><a target="_blank" href="htmlcss/7537.html">HTML教程：类型File的Input按钮功能研究</a></li> <li><a target="_blank" href="htmlcss/7806.html">学习-CSS网页制作实用技巧九则</a></li> <li><a target="_blank" href="htmlcss/8030.html">CSS中英文无法自动换行的解决办法</a></li> <li><a target="_blank" href="htmlcss/8149.html">HTML与XHTML有什么不同？各有什么特点？</a></li> </ul> </div> <div class="nav10"></div> <script type="text/javascript"> /*300*250 创建于 2016-05-21*/ var cpro_id = "u2646840"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> </div> </div> <div class="nav10"></div> <div class="footer"> <div class="content"> <p>程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作</p> <p>声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！</p> <p> <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备14040726号-1</a> 2015-2020 程序员人生版权所有 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_4714809'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D4714809' type='text/javascript'%3E%3C/script%3E"));</script> </p> <div class="foot_img"> <a rel="nofollow" target="_blank" href="http://www.anquan.org"><img src="skin/images/d1.png" height="30" width="83"></a> <a rel="nofollow" href="http://www.pingpinganan.gov.cn/" target="_blank"> <img src="skin/images/d2.png" title="平平安安" alt="平平安安" border="0" height="46" width="53"> </a> <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011102000541" target="_blank"> <img title="备案网站" alt="备案网站" src="skin/images/d3.png" border="0" height="40" width="130"> </a> <a rel="nofollow" target="_blank" href="http://www.anquan.org"><img src="skin/images/d4.png" height="30" width="83"></a> </div> </div> </div> <div id="foot_layer"> <div id="f_close"><img src="skin/images/close.png" alt="关闭"></div> <a href="https://www.mzhang.cn/" target="_blank"><img src="upload/setting/2018115bebe907746cb.jpg" alt="程序员人生"></a> </div> <script> //点击左侧的隐藏 jQuery('#f_close').click(function(){ jQuery('#foot_layer').hide(); }); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ed7230f8c72727a826446d68d2709248"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>