下面一个简单jquery文字向上滚动插件：

HTML/css代码：

 

 
      
     
           
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
           
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
           
  3. <head> 
    4.  
           
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
           
  5. <title>无标题文档</title> 
    6.  
           
  6. <style> 
    7.  
           
  7. div,body,ul,li{ margin:0; padding:0;} 
    8.  
           
  8. #scroll{ height:24px; width:200px; border:1px solid #999; overflow:hidden; margin:120px auto 0 auto; position:relative;} 
    9.  
           
  9. #scroll ul{ position:relative;} 
    10.  
           
  10. #scroll ul li{ height:24px; line-height:24px; overflow:hidden;} 
    11.  
           
  11. #scroll ul li a{ color:#000; font-size:12px; margin-left:5px; text-decoration:none;} 
    12.  
           
  12. </style> 
    13.  
           
  13. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>      
    14.  
           
  14. </head> 
    15.  
           
  15.  
    16.  
           
  16. <body> 
    17.  
           
  17.     <div id="scroll"> 
    18.  
           
  18.         <ul> 
    19.  
           
  19.             <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> 
    20.  
           
  20.             <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> 
    21.  
           
  21.             <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> 
    22.  
           
  22.             <li><a href="http://tugenhua.blog.51cto.com">欢迎来到博主空间欢迎来到博主空间</a></li> 
    23.  
           
  23.         </ul> 
    24.  
           
  24.     </div> 
    25.  
          
 
      
Jquery
 
      
 
 
      
 
      
     
           
  1. <script> 
    2.  
           
  2.         (function(S){ 
    3.  
           
  3.             S.fn.extend({ 
    4.  
           
  4.                 Scroll:function(speed){ 
    5.  
           
  5.                     var liH = $(this).find("li").height(); 
    6.  
           
  6.                     var _this = $(this).find("ul"); 
    7.  
           
  7.                     function Slide(){ 
    8.  
           
  8.                         _this.animate({marginTop : -liH},1000,function(){ 
    9.  
           
  9.                             _this.css({marginTop:0}).find("li:first").appendTo(_this);   
    10.  
           
  10.                         })   
    11.  
           
  11.                     } 
    12.  
           
  12.                     //自动播放 
    13.  
           
  13.                     function autoPlay(){ 
    14.  
           
  14.                         timeId = setInterval(Slide,speed);   
    15.  
           
  15.                     }; 
    16.  
           
  16.                     //停止播放 
    17.  
           
  17.                     function autoStop(){ 
    18.  
           
  18.                         window.clearInterval(timeId); 
    19.  
           
  19.                     }; 
    20.  
           
  20.                     autoPlay(); 
    21.  
           
  21.                      _this.hover(autoStop,autoPlay).mouseout() 
    22.  
           
  22.                 }    
    23.  
           
  23.             }) 
    24.  
           
  24.         })(jQuery); 
    25.  
           
  25.         $(function(){ 
    26.  
           
  26.             $("#scroll").Scroll(2000);   
    27.  
           
  27.         }) 
    28.  
           
  28.     </script> 
    29.