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

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

目前創(chuàng)新互聯(lián)建站已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、?？稻W(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

前端頁面需先引入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">
    <h2>中獎記錄</h2>
    </div>
    <div class="record_list">
      <p>恭喜Ivy抽中10元話費(fèi)</p>
      <p>恭喜LinDL抽中100元京東E卡</p>
      <p>恭喜Mary抽中40元電影票優(yōu)惠券</p>
      <p>恭喜Ivy抽中30元話費(fèi)</p>
      <p>恭喜金坎抽中50元話費(fèi)</p>
      <p>恭喜Ivy抽中80元話費(fèi)</p>
      <p>恭喜Ivy抽中200元話費(fèi)</p>
      <p>恭喜慧林抽中5000元話費(fèi)</p>
      <p>恭喜張敏抽中iPhone7</p>
      <p>恭喜Ivy抽中10元話費(fèi)</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);

效果圖：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：H5實現(xiàn)中獎記錄逐行滾動切換效果
轉(zhuǎn)載注明：http://jinyejixie.com/article20/pgipjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、商城網(wǎng)站、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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