1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" c /> 
  5. <title>无标题文档</title> 
  6. <style type="text/css"> 
  7. ul,li{margin:0;padding:0}  
  8. #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
  9. #scrollDiv li{height:25px;padding-left:10px;}  
  10. </style> 
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
  12. <script type="text/javascript"> 
  13. function AutoScroll(obj){  
  14.         $(obj).find("ul").animate({  
  15.                 marginTop:"-25px"  
  16.         },1000,function(){  
  17.                 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);  
  18.         });  
  19. }  
  20. $(document).ready(function(){  
  21. setInterval('AutoScroll("#scrollDiv")',3000)  
  22. });  
  23. </script> 
  24. </head> 
  25.  
  26. <body> 
  27. <div id="scrollDiv"> 
  28. <ul> 
  29.     <li>这是公告标题的第一行</li> 
  30.     <li>这是公告标题的第二行</li> 
  31.     <li>这是公告标题的第三行</li> 
  32.     <li>这是公告标题的第四行</li> 
  33.     <li>这是公告标题的第五行</li> 
  34.     <li>这是公告标题的第六行</li> 
  35.     <li>这是公告标题的第七行</li> 
  36.     <li>这是公告标题的第八行</li> 
  37. </ul> 
  38. </div> 
  39. </body> 
  40. </html>