最近公司搞一個(gè)抽獎(jiǎng)轉(zhuǎn)盤,然后下面有個(gè)中獎(jiǎng)人列表信息,向上滾動(dòng)的效果,在網(wǎng)上找了好了好多demo,不過他們大部分都有些小問題,因?yàn)槲业臄?shù)據(jù)第動(dòng)態(tài)添加進(jìn)來的,所以會(huì)導(dǎo)致重復(fù)疊加div向上滾動(dòng),這樣太耗性能了,搞了兩天,終于問公司其他同事解決了,下面寫出來分享下:

動(dòng)態(tài)添加數(shù)據(jù)我就不寫了

這里是個(gè)js封裝的,類似一jq,到時(shí)候直接引進(jìn)代碼里就行了(這個(gè)是公共代碼,只需放到一個(gè)文件夾里)

/***/ (function($){$.fn.myScroll = function(options){//默認(rèn)配置var defaults = {speed:40, //滾動(dòng)速度,值越大速度越慢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);


然后只需寫個(gè)向上滾動(dòng)的js
$("#person").myScroll({speed:40,//數(shù)值越大,速度越慢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>

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/creatP/p/6797658.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。