中奖人员信息向上滚动

Posted 2020-09-16 creatP

最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能了,搞了两天,终于问公司其他同事解决了,下面写出来分享下:

动态添加数据我就不写了

这里是个js封装的,类似一jq,到时候直接引进代码里就行了(这个是公共代码,只需放到一个文件夹里)

/**
 */
(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);


然后只需写个向上滚动的js

 $("#person").myScroll({
                speed:40,//数值越大,速度越慢
                rowHeight:20//li的高度
            })

这样就ok了

html:

<div cllass="person">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>