div中ul内容逐条上下滚动

 
   /**  
  *   
  * jQuery scrollQ plugin li上下滚动插件 
  * @name jquery-scrollQ.js  
  * @author Q  
  * @date 2012-03-23  
  * line 显示li行数  
  * scrollNum 每次滚动li行数 
  * scrollTime 滚动速度 单位毫秒 
  *  
  */    
 (function($){    
     var status = false;    
     $.fn.scrollQ = function(options){    
         var defaults = {    
             line:4,    
             scrollNum:2,    
             scrollTime:1000  
         }  
         var options=jQuery.extend(defaults,options);  
         var _self = this;  
         return this.each(function(){    
             $("li",this).each(function(){  
                 $(this).css("display","none");  
             })  
             $("li:lt("+options.line+")",this).each(function(){  
                 $(this).css("display","block");  
             })  
             function scroll() {  
                 for(i=0;i<options.scrollNum;i++) {  
                     var start=$("li:first",_self);  
                     start.fadeOut(100);  
                     start.css("display","none");  
                     start.appendTo(_self);  
                     $("li:eq("+(options.line-1)+")",_self).each(function(){  
                         $(this).fadeIn(500);  
                         $(this).css("display","block");  
                     })  
                 }  
             }  
             var timer;  
             timer = setInterval(scroll,options.scrollTime);  
             _self.bind("mouseover",function(){  
                 clearInterval(timer);  
             });  
             _self.bind("mouseout",function(){  
                 timer = setInterval(scroll,options.scrollTime);  
             });  
               
         });  
     }  
 })(jQuery);   
 
 

调用方式如下：

[html] view plaincopy 
    
 <!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>test</TITLE>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>  
 <script type="text/javascript" src="scrollQ.js"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){  
     $("#sItem").scrollQ();  
 });  
 </script>  
 </head>  
     <body>  
     <div>  
     <ul id="sItem">  
     <li>标题1</li>  
     <li>标题2</li>  
     <li>标题3</li>  
     <li>标题4</li>  
     <li>标题5</li>  
     <li>标题6</li>  
     <li>标题7</li>  
     <li>标题8</li>  
     <li>标题9</li>  
     <li>标题10</li>  
     </ul>  
     </div>  
 </body>  
 </html>  

div中ul内容逐条上下滚动

猜你喜欢