代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字无缝向上滚动</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT> <script type="text/javascript"> var run; var scroltime=5000//间隔时间 function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-25px" },1000,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(document).ready(function(){ run=setInterval('AutoScroll("#scrollDiv")',scroltime) $("#scrollDiv").mouseover(function(){ clearInterval(run); }); $("#scrollDiv").mouseout(function(){ run=setInterval('AutoScroll("#scrollDiv")',scroltime) }); }); </script> </head> <body> <div id="scrollDiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </html>