转盘

最新推荐文章于 2020-09-08 14:31:50 发布

风的中心

最新推荐文章于 2020-09-08 14:31:50 发布

阅读量348

点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实用jQuery实现多宫格方块抽奖转盘代码 - JS代码网</title>
<meta name="keywords" content="jQuery抽奖转盘,jQuery转盘抽奖,jQuery圆盘抽奖,jQuery抽奖代码,jQuery抽奖插件,jQuery方块抽奖" />
<meta name="description" content="JS代码网提供jQuery插件,jQuery抽奖插件,jQuery圆盘抽奖插件学习教程和代码下载使用" />
<style type="text/css">
#lottery {
width: 574px;
height: 584px;
margin: 20px auto 0;
background: url(images/bg.jpg) no-repeat;
padding: 50px 55px;
}

#lottery table td {
width: 142px;
height: 142px;
text-align: center;
vertical-align: middle;
font-size: 24px;
color: #333;
font-index: -999
}

#lottery table td a {
width: 284px;
height: 284px;
line-height: 150px;
display: block;
text-decoration: none;
}

#lottery table td.active {
background-color: #ea0000;
}
</style>
</head>

<body>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
<td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
<td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
<td colspan="2" rowspan="2">
<a href=""></a>
</td>
<td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
<td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
<td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
<td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var lottery = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function(id) {
if ($("#" + id).find(".lottery-unit").length > 0) {
$lottery = $("#" + id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".lottery-unit-" + this.index).addClass("active");
};
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".lottery-unit-" + index).removeClass("active");
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find(".lottery-unit-" + index).addClass("active");
this.index = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};

function roll() {
lottery.times += 1;
lottery.roll();
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer);
lottery.prize = -1;
lottery.times = 0;
click = false;
} else {
if (lottery.times < lottery.cycle) {
lottery.speed -= 10;
} else if (lottery.times == lottery.cycle) {
var index = Math.random() * (lottery.count) | 0;
lottery.prize = index;
} else {
if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
} else {
lottery.speed += 20;
}
}
if (lottery.speed < 40) {
lottery.speed = 40;
};
console.log(lottery.times + '^^^^^^' + lottery.speed + '^^^^^^^' + lottery.prize+"jjjjj"+lottery.index+"dd"+setTimeout(roll, lottery.speed));
lottery.timer = setTimeout(roll, lottery.speed);
}
return false;
}
var click = false;
window.onload = function() {
lottery.init('lottery');
$("#lottery a").click(function() {
if (click) {
return false;
} else {
lottery.speed = 100;
roll();
click = true;
return false;
}
});
};
</script>
</body>

</html>

风的中心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
转盘

实用jQuery实现多宫格方块抽奖转盘代码 - JS代码网 #lottery { width: 574px; height: 584px; margin: 20px auto 0; background: url(images/bg.jpg) no-repeat;
复制链接

扫一扫