Js逐行文本笔墨转动，文本间歇向上转动代码

发布时间：2018-08-18 02:54:23 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE