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

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

前端页面需先引入jquery

  
  
  
  
  
    .box{
      width: 18rem;
      height: 15rem;
      margin: auto;
      background-color: cadetblue;
    }
    .record_title{
      text-align: center;
      width: 100%;
      height: 2rem;
      margin-top: 0.2rem;
      z-index: 2;
      background-color: cadetblue;
      vertical-align: middle;
    }
    .record_list{
      height: 11rem;
      overflow: hidden;
      background-color: cadetblue;
      text-align: left;
      margin-left: 1rem;
    }
  


  
    
    中奖记录
    
    
      
恭喜Ivy抽中10元话费
      
恭喜LinDL抽中100元京东E卡
      
恭喜Mary抽中40元电影票优惠券
      
恭喜Ivy抽中30元话费
      
恭喜金坎抽中50元话费
      
恭喜Ivy抽中80元话费
      
恭喜Ivy抽中200元话费
      
恭喜慧林抽中5000元话费
      
恭喜张敏抽中iPhone7
      
恭喜Ivy抽中10元话费
    
  

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

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

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。