table列表滚动

css 

index.html 

  
     
        
        
        
        
     
  
  
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     
     
        
        
        
        
     

  

序号	姓名	公司	省会
1	bert	云智慧	河南
2	bert	云智慧	河南
3	bert	云智慧	河南
4	bert	云智慧	河南
5	bert	云智慧	河南
6	bert	云智慧	河南
7	bert	云智慧	河南
8	bert	云智慧	河南
9	bert	云智慧	河南
10	bert	云智慧	河南
11	bert	云智慧	河南
12	bert	云智慧	河南

 

scroll.js

(function($){
    $.fn.myScroll = function(options){
        //默认配置
        var defaults = {
            speed:40,  //滚动速度,值越大速度越慢
            rowHeight:30 //每行的高度
        };

        var opts = $.extend({}, defaults, options),intId = [];

        function marquee(obj, step){

            obj.find("table").animate({
                marginTop: '-=1'
            },10,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if((s-30) >= step){ //减去 table thead的高度
                    $(this).find("tbody tr").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", '-30px');
                }
            });
        }

        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("table").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("table").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });

        });

    }

})(jQuery);