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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:01:54

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

jQuery實(shí)現(xiàn)適用于移動端的跑馬燈抽獎(jiǎng)特效示例:本文實(shí)例講述了jQuery實(shí)現(xiàn)適用于移動端的跑馬燈抽獎(jiǎng)特效。分享給大家供大家參考，具體如下：圖片全部隱私處理跑馬燈抽獎(jiǎng)特效難點(diǎn)一：獎(jiǎng)品位置排放，如下圖 <div class=gift_div> <div class=gift gift1>獎(jiǎng)品1<

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jQuery實(shí)現(xiàn)適用于移動端的跑馬燈抽獎(jiǎng)特效示例:本文實(shí)例講述了jQuery實(shí)現(xiàn)適用于移動端的跑馬燈抽獎(jiǎng)特效。分享給大家供大家參考，具體如下：圖片全部隱私處理跑馬燈抽獎(jiǎng)特效難點(diǎn)一：獎(jiǎng)品位置排放，如下圖 <div class=gift_div> <div class=gift gift1>獎(jiǎng)品1<

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

圖片全部隱私處理

跑馬燈抽獎(jiǎng)特效難點(diǎn)一：獎(jiǎng)品位置排放，如下圖

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

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

難點(diǎn)二：速度控制，其實(shí)這個(gè)沒啥，多嘗試幾個(gè)速度就行；

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

$(function() {
 var speed = 150, //跑馬燈速度
 click = true, //阻止多次點(diǎn)擊
 img_index = -1, //陰影停在當(dāng)前獎(jiǎng)品的序號
 circle = 0, //跑馬燈跑了多少次
 maths,//取一個(gè)隨機(jī)數(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ù)（都已做了注解）；

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

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

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

上面有一個(gè)maths隨機(jī)數(shù)，這個(gè)是隨機(jī)讓用戶抽獎(jiǎng)隨機(jī)中哪一個(gè)，要是需要固定比例的下一節(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">
 您今日抽獎(jiǎng)機(jī)會還有<span class="red">3</span>次
 </div>
 <div class="gift_div">
 <div class="gift gift1">獎(jiǎng)品1</div>
 <div class="gift gift2">獎(jiǎng)品2</div>
 <div class="gift gift3">獎(jiǎng)品3</div>
 <div class="gift gift4">獎(jiǎng)品4</div>
 <div class="gift gift5">獎(jiǎng)品5</div>
 <div class="gift gift6">獎(jiǎng)品6</div>
 <div class="gift gift7">獎(jiǎng)品7</div>
 <div class="gift gift8">獎(jiǎng)品8</div>
 <div class="start">開始抽獎(jiǎng)</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, //阻止多次點(diǎn)擊
 img_index = -1, //陰影停在當(dāng)前獎(jiǎng)品的序號
 circle = 0, //跑馬燈跑了多少次
 maths,//取一個(gè)隨機(jī)數(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：這里推薦兩款相關(guān)在線HTML/CSS/JS運(yùn)行工具如下：

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

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

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

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：抽獎(jiǎng) 特效跑馬燈

熱門焦點(diǎn)

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

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

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

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

最新推薦

猜你喜歡

熱門推薦