jQuery實現(xiàn)適用于移動端的跑馬燈抽獎特效示例

更新時間：2019年01月18日 12:06:38 作者：impossible1994727

這篇文章主要介紹了jQuery實現(xiàn)適用于移動端的跑馬燈抽獎特效,結合實例形式分析了jQuery結合時間函數(shù)動態(tài)操作頁面元素實現(xiàn)的跑馬燈抽獎功能相關操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)適用于移動端的跑馬燈抽獎特效。分享給大家供大家參考，具體如下：

圖片全部隱私處理

跑馬燈抽獎特效難點一：獎品位置排放，如下圖

<div class="gift_div">
  <div class="gift gift1">獎品1</div>
  <div class="gift gift2">獎品2</div>
  <div class="gift gift3">獎品3</div>
  <div class="gift gift4">獎品4</div>
  <div class="gift gift5">獎品5</div>
  <div class="gift gift6">獎品6</div>
  <div class="gift gift7">獎品7</div>
  <div class="gift gift8">獎品8</div>
  <div class="start">開始抽獎</div>
</div>

按照代碼常規(guī)，獎品1,2,3,4是順序排列，在這里，使用了定位將他們繞成一個圈。

難點二：速度控制，其實這個沒啥，多嘗試幾個速度就行；

js代碼重點就是定時器的循環(huán)，代碼如下：

$(function() {
  var speed = 150, //跑馬燈速度
    click = true, //阻止多次點擊
    img_index = -1, //陰影停在當前獎品的序號
    circle = 0, //跑馬燈跑了多少次
    maths,//取一個隨機數(shù);
    num=$('.red').text();
  $('.start').click(function() {
    if(click&&num>0) {
      click = false;
      maths = parseInt((Math.random() * 10) + 80);
      light();
    } else {
      return false;
    }
  });
  function light() {
    img();
    circle++;
    var timer = setTimeout(light, speed);
    if(circle > 0 && circle < 5) {
      speed -= 10;
    } else if(circle > 5 && circle < 20) {
      speed -= 5;
    } else if(circle > 50 && circle < 70) {
      speed += 5
    } else if(circle > 70 && circle < maths) {
      speed += 10
    } else if(circle == maths) {
      var text = $('.gift_div .gift:eq(' + img_index + ')').text();
      console.log(circle + maths, 'aaa', img_index, $('.gift_div .gift:eq(' + img_index + ')').text())
      clearTimeout(timer);
      setTimeout(function() {
        alert('恭喜獲得' + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $('.red').text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $('.gift_div .gift:eq(' + img_index + ')').addClass('gift_b').siblings().removeClass('gift_b');
  }
});

上面的代碼，從最上面定義我們所需的各種參數(shù)（都已做了注解）；

接著點擊開始抽獎，首先，在抽獎執(zhí)行以前我們要先判斷讓一次的抽獎是否已經(jīng)結束并且今天是否還有剩余的抽獎次數(shù)，當這兩個條件都滿足，開始執(zhí)行抽獎light()，同時，在開始抽獎之前，將click這個參數(shù)置為false，避免抽獎還沒結束用戶就開始下一次的抽獎；

在抽獎light()函數(shù)里面調(diào)用抽獎陰影不停移動的函數(shù)img()，接著，給一個定時器var timer = setTimeout(light, speed);這個定時器里面的light就是根據(jù)speed的速度來不停的調(diào)用light()這個函數(shù)本身（城會玩），然后我們在下面根據(jù)這個抽獎陰影移動的次數(shù)不停地改變speed來改變light的調(diào)用速度從而改變陰影的移動速度（這個速度自己看數(shù)值怎么舒服怎么改吧）；

最后在這個light()函數(shù)的最后要做定時器的清除，抽獎總要抽到東西的呀，不暫停怎么抽。。暫停以后要重置開始抽獎之前的參數(shù)。

上面有一個maths隨機數(shù)，這個是隨機讓用戶抽獎隨機中哪一個，要是需要固定比例的下一節(jié)出。

完整代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/choujiang.css" rel="external nofollow" />
    <style type="text/css">
    </style>
  </head>
  <body>
    <div class="light">
      <div class="num">
        您今日抽獎機會還有<span class="red">3</span>次
      </div>
      <div class="gift_div">
        <div class="gift gift1">獎品1</div>
        <div class="gift gift2">獎品2</div>
        <div class="gift gift3">獎品3</div>
        <div class="gift gift4">獎品4</div>
        <div class="gift gift5">獎品5</div>
        <div class="gift gift6">獎品6</div>
        <div class="gift gift7">獎品7</div>
        <div class="gift gift8">獎品8</div>
        <div class="start">開始抽獎</div>
      </div>
    </div>
  </body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/choujiang.js" type="text/javascript" charset="utf-8"></script>
</html>

css部分：

* {
  margin: 0;
  padding: 0;
}
.light {
  width: 100%;
  height: 7.6rem;
  background: #BD1D25;
  padding: .2rem;
  box-sizing: border-box;
  font-size: .24rem;
}
.light .gift_div {
  width: 100%;
  height: 6.4rem;
  background: #139365;
  border-radius: .1rem;
  position: relative;
  padding: .05rem .5%;
  box-sizing: border-box;
  margin-top: .2rem;
}
.gift_div>div {
  position: absolute;
  width: 32%;
  height: 2rem;
  margin: .05rem .5%;
  background: #E6F0EC;
  border-radius: .06rem;
}
.gift2,
.gift6,
.start{
  left: 33.5%;
}
.gift3,
.gift4,
.gift5{
  right: .5%;
}
.gift4,
.gift8,
.start{
  top: 2.15rem;
}
.gift5,
.gift6,
.gift7{
  bottom: .05rem;
}
.gift_div .start{
  background: #FDB827;
  text-align: center;
  line-height: 2rem;
  color: #FF001F;
}
.red{
  color: red;
}
.num{
  text-align: center;
  font-size: .32rem;
  line-height: .6rem;
  background: #E6EFEC;
  border-radius: .6rem;
}
.gift_b:after{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  content: '';
  left: 0;
}

js部分：

$(function() {
  var speed = 150, //跑馬燈速度
    click = true, //阻止多次點擊
    img_index = -1, //陰影停在當前獎品的序號
    circle = 0, //跑馬燈跑了多少次
    maths,//取一個隨機數(shù);
    num=$('.red').text();
  $('.start').click(function() {
    if(click&&num>0) {
      click = false;
      maths = parseInt((Math.random() * 10) + 80);
      light();
    } else {
      return false;
    }
  });
  function light() {
    img();
    circle++;
    var timer = setTimeout(light, speed);
    if(circle > 0 && circle < 5) {
      speed -= 10;
    } else if(circle > 5 && circle < 20) {
      speed -= 5;
    } else if(circle > 50 && circle < 70) {
      speed += 5
    } else if(circle > 70 && circle < maths) {
      speed += 10
    } else if(circle == maths) {
      var text = $('.gift_div .gift:eq(' + img_index + ')').text();
      console.log(circle + maths, 'aaa', img_index, $('.gift_div .gift:eq(' + img_index + ')').text())
      clearTimeout(timer);
      setTimeout(function() {
        alert('恭喜獲得' + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $('.red').text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $('.gift_div .gift:eq(' + img_index + ')').addClass('gift_b').siblings().removeClass('gift_b');
  }
});

html里面引用的rem.js是我自己封裝的，讓100px=1rem;

PS：這里推薦兩款相關在線HTML/CSS/JS運行工具如下：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：
http://tools.jb51.net/code/WebCodeRun

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: