H5實現(xiàn)中獎記錄逐行滾動切換效果

更新時間：2017年03月13日 08:58:45 作者：_LinDL

這篇文章主要為大家詳細介紹了H5實現(xiàn)中獎記錄逐行滾動切換效果，利用定時器實現(xiàn)中獎記錄逐行展示，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

前端頁面需先引入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元電影票優(yōu)惠券</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>

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

效果圖：