Js逐行文本文字滚动，文本间歇向上滚动代码

发布时间：2018-08-17 22:42 所属栏目：121 来源：站长网

导读：Js逐行文本文字滚动，文本间歇向上滚动代码，当把鼠标放上时会停顿，我觉得挺好，挺实用，可以你的网页上增加一个小区域，放上本代码，用于网站内容推荐或广告信息，同时也可学习此类代码的编写原理，Js文字滚动，分享给浏览者。演示代码： !DOCTYPE html

　　Js逐行文本文字滚动，文本间歇向上滚动代码，当把鼠标放上时会停顿，我觉得挺好，挺实用，可以你的网页上增加一个小区域，放上本代码，用于网站内容推荐或广告信息，同时也可学习此类代码的编写原理，Js文字滚动，分享给浏览者。

　　演示代码：

<!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>逐行文本滚动效果</title> <style type="text/css"> body,div,ul,li{margin:0;padding:0;} ul,li{list-style:none;} body{font-size:12px;color:#000000;} .con{width:300px;height:30px;border:1px solid #333333;overflow:hidden;margin:100px auto 0;} .list{width:100%;} .list li{width:100%;height:30px;line-height:30px;text-indent:20px;float:left;} </style> <script language="javascript"> function scrollTitle(changeSpeed,scrollSpeed){ var con = document.getElementById("list_con"); var list = document.getElementById("news_list"); list.innerHTML += list.innerHTML; var items = list.getElementsByTagName("li"); var timer_1 = setInterval(_scrollTitle,changeSpeed); var heightAll =0; for(var i=0;i<items.length;i++){ heightAll += items[i].offsetHeight; } var heightHalf = parseInt(heightAll/2); con.onmouseover = function(){ if(timer_1){ clearInterval(timer_1); timer_1=null; } } con.onmouseout = function(){ if(timer_1){ clearInterval(timer_1); timer_1=null; } timer_1 = setInterval(_scrollTitle,changeSpeed); } function _scrollTitle(){ var timer; var num = 30; timer = setInterval(scrollTop,scrollSpeed); function scrollTop(){ if(con.scrollTop<heightHalf){ con.scrollTop += 3; num -= 3; }else{ con.scrollTop = 0; } if(num <= 0){ clearInterval(timer); } } } } </script> </head> <body> <div class="con" id="list_con"> <ul class="list" id="news_list"> <li><a href="http://www.veryhuo.com/down/html/33972.html" target="_blank">变幻之美DivCSS网页布局揭秘-案例实战篇源码</a></li> <li><a href="http://www.veryhuo.com/down/html/33971.html" target="_blank">ThinkPHP 框架开发教程及技巧 PDF</a></li> <li><a href="http://www.veryhuo.com/down/html/33970.html" target="_blank">ThinkPHP 2.1 自定义标签示例说明 pdf</a></li> <li><a href="http://www.veryhuo.com/down/html/33969.html" target="_blank">ThinkPHP 2.0完全开发手册 pdf</a></li> <li><a href="http://www.veryhuo.com/down/html/33968.html" target="_blank">jquery模拟WEB操作系统界面代码，jmos家猫作品</a></li> <li><a href="http://www.veryhuo.com/down/html/33967.html" target="_blank">输入框自动完成、补全Email提示插件，InputSuggest.js</a></li> </ul> </div> <script language="javascript">scrollTitle(3000,50);</script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）