H5实现中奖记录逐行滚动切换效果

H5实现中奖记录逐行滚动切换效果

本文实例为大家分享了H5逐行滚动切换效果的具体代码，供大家参考，具体内容如下

前端页面需先引入jquery

恭喜Ivy抽中10元话费

恭喜LinDL抽中100元京东E卡

恭喜Mary抽中40元电影票优惠券

恭喜Ivy抽中30元话费

恭喜金坎抽中50元话费

恭喜Ivy抽中80元话费

恭喜Ivy抽中200元话费

恭喜慧林抽中5000元话费

恭喜张敏抽中iPhone7

恭喜Ivy抽中10元话费

利用定时器实现中奖记录逐行展示

recordRoll.js

/**

* Created by lin on 2017/3/12.

*/

(function($){

$.fn.extend({

RollTitle: function(opt){

if(!opt) var opt={};

var _this = this;

_this.timer = null;

_this.lineH = _this.find("p:first").height();

_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);

_this.speed=opt.speed,

_this.timespan=opt.timespan;

if(_this.line==0) this.line=1;

_this.scrollUp=function(){

_this.animate({

marginTop:0

},_this.speed,function(){

for(i=1;i<=_this.line;i++){

_this.find("p:first").appendTo(_this);

}

_this.css({marginTop:0});

});

}

_this.hover(function(){

clearInterval(_this.timer);

},function(){

_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);

}).mouseout();

}

})

})(jQuery);

效果图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。