最近公司搞一個抽獎轉盤,然后下面有個中獎人列表信息,向上滾動的效果,在網上找了好了好多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>

?

?

轉載于:https://www.cnblogs.com/creatP/p/6797658.html

總結

以上是生活随笔為你收集整理的中奖人员信息向上滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。