溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用jQuery怎么實現一個適用于移動端的跑馬燈抽獎特效？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
<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>
按照代碼常規，獎品1,2,3,4是順序排列，在這里，使用了定位將他們繞成一個圈。
難點二：速度控制，其實這個沒啥，多嘗試幾個速度就行；
js代碼重點就是定時器的循環，代碼如下：
$(function() {
var speed = 150, //跑馬燈速度
click = true, //阻止多次點擊
img_index = -1, //陰影停在當前獎品的序號
circle = 0, //跑馬燈跑了多少次
maths,//取一個隨機數;
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');
}
});上面的代碼，從最上面定義我們所需的各種參數（都已做了注解）；
接著點擊開始抽獎，首先，在抽獎執行以前我們要先判斷讓一次的抽獎是否已經結束并且今天是否還有剩余的抽獎次數，當這兩個條件都滿足，開始執行抽獎light()，同時，在開始抽獎之前，將click這個參數置為false，避免抽獎還沒結束用戶就開始下一次的抽獎；
在抽獎light()函數里面調用抽獎陰影不停移動的函數img()，接著，給一個定時器var timer = setTimeout(light, speed);這個定時器里面的light就是根據speed的速度來不停的調用light()這個函數本身（城會玩），然后我們在下面根據這個抽獎陰影移動的次數不停地改變speed來改變light的調用速度從而改變陰影的移動速度（這個速度自己看數值怎么舒服怎么改吧）；
最后在這個light()函數的最后要做定時器的清除，抽獎總要抽到東西的呀，不暫停怎么抽。。暫停以后要重置開始抽獎之前的參數。
上面有一個maths隨機數，這個是隨機讓用戶抽獎隨機中哪一個，要是需要固定比例的下一節出。
完整代碼如下：
<!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,//取一個隨機數;
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');
}
});關于使用jQuery怎么實現一個適用于移動端的跑馬燈抽獎特效問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
