<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>文字列表无缝向上滚动JavaScript代码-代码库</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} a{color:#333333; text-decoration:none;} a:hover{color:#FF0000; text-decoration:none;} #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; background:url() no-repeat left center; text-align:left; text-indent:15px; } #demo2 li{ list-style-type:none; height:22px; background:url() no-repeat left center; text-align:left; text-indent:15px; } </style> </head> <body> <div id="demo" style="overflow:hidden;height:125px;280px;"> <ul id="demo1"> <li><a href="/" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li> <li><a href="/" target="_blank">多层嵌套的一个层展开</a></li> <li><a href="/" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li> <li><a href="/" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li> <li><a href="/" target="_blank">《C++ Primer》中文第四版 chm</a></li> <li><a href="/" target="_blank">C++工资管理系统(Access)</a></li> <li><a href="/" target="_blank">非常牛的左侧栏JS折叠菜单</a></li> <li><a href="/" target="_blank">左侧栏JS折叠菜单</a></li> <li><a href="/" target="_blank">《Java2核心特性》第7版</a></li> </ul> <div id="demo2"></div> </div> <script> var speed = 80 //速度 var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop <= 0){ demo.scrollTop -= demo1.offsetHeight }else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} //停止 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //从新开始 </script> </body> </html>