H5實現中獎記錄逐行滾動切換效果

2019-11-19 17:10:58

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了H5逐行滾動切換效果的具體代碼，供大家參考，具體內容如下

前端頁面需先引入jquery

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>中獎記錄跑馬燈特效</title>  <script src="../js/jquery-2.2.0.min.js"></script>  <script src="../js/recordRoll.js"></script>  <style>    .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;    }  </style></head><body>  <div class="box">    <div class="record_title">    <h1>中獎記錄</h1>    </div>    <div class="record_list">      <p>恭喜Ivy抽中10元話費</p>      <p>恭喜LinDL抽中100元京東E卡</p>      <p>恭喜Mary抽中40元電影票優惠券</p>      <p>恭喜Ivy抽中30元話費</p>      <p>恭喜金坎抽中50元話費</p>      <p>恭喜Ivy抽中80元話費</p>      <p>恭喜Ivy抽中200元話費</p>      <p>恭喜慧林抽中5000元話費</p>      <p>恭喜張敏抽中iPhone7</p>      <p>恭喜Ivy抽中10元話費</p>    </div>  </div></body><script>  $(document.body).ready(function(){    $(".record_list").RollTitle({line:1,speed:800,timespan:1});  });</script></html>

利用定時器實現中獎記錄逐行展示
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);

效果圖：