js

1
2
3
$div.myScroll({
     speed:60,  //数值越大，速度越慢
});

html结构

1
2
3
4
5
6
7
< div >
     < ul >
         < li >< p ></ p ></ li >
         < li >< p ></ p ></ li >
         < li >< p ></ p ></ li >
     </ ul >
</ div >

scroll.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// JavaScript Document
( function ($){
     $.fn.myScroll =  function (options){
     //默认配置
     var  defaults = {
         speed:40,   //滚动速度,值越大速度越慢
     };
     
     var  opts = $.extend({}, defaults, options),intId = [];
     
     function  marquee(obj, step){
     
         obj.find( "ul" ).animate({
             marginTop:  '-=1'
         },0, function (){
                 var  s = Math.abs(parseInt($( this ).css( "margin-top" )));
                 //20是p元素的浮动，s跟总高+浮动进行对比
                 if (s >= ($( this ).find( "li" ).slice(0, 1).height() + 20)){
                     $( this ).find( "li" ).slice(0, 1).appendTo($( this ));
                     $( this ).css( "margin-top" , 0);
                 }
             });
         }
         
         this .each( function (i){
             var  speed = opts[ "speed" ],_this = $( this );
             intId[i] = setInterval( function (){
                 if (_this.find( "ul" ).height()<=_this.height()){
                     clearInterval(intId[i]);
                 } else {
                     marquee(_this);
                 }
             }, speed);
 
             _this.hover( function (){
                 clearInterval(intId[i]);
             }, function (){
                 intId[i] = setInterval( function (){
                     if (_this.find( "ul" ).height()<=_this.height()){
                         clearInterval(intId[i]);
                     } else {
                         marquee(_this);
                     }
                 }, speed);
             });
         
         });
 
     }
 
})(jQuery);