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

作者：袖梨 2022-06-25

前端页面需先引入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)varopt={};          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); 效果图：

相关文章

精彩推荐