前端:Jquery滚动列表

陈旭源 发布于 2017/03/14 17:15
阅读 137
收藏 0

// JavaScript Document
(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:24 //每行的高度
    };
    
    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")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }
        
        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").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("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        
        });

    }

})(jQuery);

 

************************************分割线************************************

上面是我在网上找的一个jquery滚动列表的功能,类似于新闻滚动的东西。

问题:列表的内容是异步加载过来的,初次加载调用没问题,然后页面还有一个刷新按钮去刷新数据。然后问题就出现了,多次调用滚动的功能会使列表滚动速度越来越快。求大神帮忙改进下,添加一个类似停止的方法,每次调用滚动之前先调用停止功能。谢谢,好人一生平安

加载中
返回顶部
顶部