快捷導航

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

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)授權(quán)登錄
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
JavaScript實現(xiàn)圖片放大鏡效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
JS中類的靜態(tài)方法，靜態(tài)變量，實例方法，實例變量區(qū)別與用法實例分析
這篇文章主要介紹了JS中類的靜態(tài)方法，靜態(tài)變量，實例方法，實例變量區(qū)別與用法,結(jié)合實例形式詳細分析了JS中類的靜態(tài)方法，靜態(tài)變量，實例方法，實例變量相關(guān)功能、使用方法及操作注意事項,需要的朋友可以參考下
2020-03-03
js解決軟鍵盤遮擋輸入框的問題分享
下面小編就為大家推薦一篇js解決軟鍵盤遮擋輸入框的問題分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
js時鐘翻牌效果實現(xiàn)代碼分享
這篇文章主要介紹了javascript時鐘翻牌效果的實現(xiàn)，效果非?？犰牛瑢崿F(xiàn)步驟也很簡單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
可以拖動的div 實現(xiàn)代碼
可以拖動的div是一個比較難以做到的效果，特別是在瀏覽器對于js代碼的運行效率還不是足夠高的情況下，不過聽說firefox對于js的支持正在增加，大概是料到了js在網(wǎng)頁瀏覽的桌面化趨勢中所占的重要地位吧。
2009-06-06
關(guān)于JS中的全等和不全等、等于和不等于問題
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執(zhí)行類型轉(zhuǎn)換。接下來通過本文給大家介紹JS中的全等和不全等、等于和不等于，一起看看吧
2021-09-09
javascript-簡單的日歷實現(xiàn)及Date對象語法介紹(附圖)
主要是對Date對象的使用，首先回憶一下Date對象的參數(shù)及方法，代碼如下，感興趣的朋友可以參考下哈
2013-05-05
詳解如何使用JavaScript獲取自動消失的聯(lián)想詞
前幾天在做數(shù)據(jù)分析時,我嘗試獲取某網(wǎng)站上輸入搜索詞后的聯(lián)想詞,輸入搜索詞后會彈出一個顯示聯(lián)想詞的框,有趣的是,輸入框失去焦點后,聯(lián)想詞彈框就自動消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動消失的聯(lián)想詞,需要的朋友可以參考下
2024-06-06
js正則表達式中exec用法實例
這篇文章主要介紹了js正則表達式中exec用法,實例分析了javascript中使用exec執(zhí)行正則表達式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07