手机端html跑马灯效果,jQuery实现适用于移动端的跑马灯抽奖特效示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效。分享給大家供大家參考，具體如下：
圖片全部隱私處理
跑馬燈抽獎(jiǎng)特效難點(diǎn)一：獎(jiǎng)品位置排放，如下圖
獎(jiǎng)品1 獎(jiǎng)品2 獎(jiǎng)品3 獎(jiǎng)品4 獎(jiǎng)品5 獎(jiǎng)品6 獎(jiǎng)品7 獎(jiǎng)品8 開始抽獎(jiǎng)按照代碼常規(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)品的序號(hào)
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)陰影不停移動(dòng)的函數(shù)img()，接著，給一個(gè)定時(shí)器var timer = setTimeout(light, speed);這個(gè)定時(shí)器里面的light就是根據(jù)speed的速度來不停的調(diào)用light()這個(gè)函數(shù)本身(城會(huì)玩)，然后我們在下面根據(jù)這個(gè)抽獎(jiǎng)陰影移動(dòng)的次數(shù)不停地改變speed來改變light的調(diào)用速度從而改變陰影的移動(dòng)速度(這個(gè)速度自己看數(shù)值怎么舒服怎么改吧)；
最后在這個(gè)light()函數(shù)的最后要做定時(shí)器的清除，抽獎(jiǎng)總要抽到東西的呀，不暫停怎么抽。。暫停以后要重置開始抽獎(jiǎng)之前的參數(shù)。
上面有一個(gè)maths隨機(jī)數(shù)，這個(gè)是隨機(jī)讓用戶抽獎(jiǎng)隨機(jī)中哪一個(gè)，要是需要固定比例的下一節(jié)出。
完整代碼如下：
您今日抽獎(jiǎng)機(jī)會(huì)還有3次
獎(jiǎng)品1 獎(jiǎng)品2 獎(jiǎng)品3 獎(jiǎng)品4 獎(jiǎng)品5 獎(jiǎng)品6 獎(jiǎng)品7 獎(jiǎng)品8 開始抽獎(jiǎng)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)品的序號(hào)
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)行工具如下：
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
總結(jié)
以上是生活随笔為你收集整理的手机端html跑马灯效果,jQuery实现适用于移动端的跑马灯抽奖特效示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django开发了个人博客以及开通公众号
- 下一篇： 业务分析和设计