本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效。分享给大家供大家参考，具体如下：
图片全部隐私处理
跑马灯抽奖特效难点一：奖品位置排放，如下图
<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');
}
});
