<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>html5双十二手机抽奖代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/styleCJ.css"/>
</head>
<body>
<div id="title">
<img src="img/title.png">
</div>
<div class="shanDeng" id="deng">
<div id="luck"><!-- luck -->
<table>
<tr>
<td class="luck-unit luck-unit-0"><img src="img/1.png"></td>
<td class="luck-unit luck-unit-1"><img src="img/2.png"></td>
<td class="luck-unit luck-unit-2"><img src="img/4.png"></td>
<td class="luck-unit luck-unit-3"><img src="img/3.png"></td>
</tr>
<tr>
<td class="luck-unit luck-unit-11"><img src="img/6.png"></td>
<td rowspan="2" colspan="2" class="cjBtn" id="btn"></td>
<td class="luck-unit luck-unit-4"><img src="img/5.png"></td>
</tr>
<tr>
<td class="luck-unit luck-unit-10"><img src="img/1.png"></td>
<td class="luck-unit luck-unit-5"><img src="img/6.png"></td>
</tr>
<tr>
<td class="luck-unit luck-unit-9"><img src="img/3.png"></td>
<td class="luck-unit luck-unit-8"><img src="img/4.png"></td>
<td class="luck-unit luck-unit-7"><img src="img/8.png"></td>
<td class="luck-unit luck-unit-6"><img src="img/7.png"></td>
</tr>
</table>
</div><!-- luckEnd -->
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var luck={
index:-1, //当前转动到哪个位置，起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:20, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:-1, //中奖位置
init:function(id){
if ($("#"+id).find(".luck-unit").length>0) {
$luck = $("#"+id);
$units = $luck.find(".luck-unit");
this.obj = $luck;
this.count = $units.length;
$luck.find(".luck-unit-"+this.index).addClass("active");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var luck = this.obj;
$(luck).find(".luck-unit-"+index).removeClass("active");
index += 1;
if (index>count-1) {
index = 0;
};
$(luck).find(".luck-unit-"+index).addClass("active");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
function roll(){
luck.times += 1;
luck.roll();
if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
clearTimeout(luck.timer);
luck.prize=-1;
luck.times=0;
click=false;
}else{
if (luck.times<luck.cycle) {
luck.speed -= 10;
}else if(luck.times==luck.cycle) {
var index = Math.random()*(luck.count)|0;
luck.prize = index;
}else{
if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
luck.speed += 110;
}else{
luck.speed += 20;
}
}
if (luck.speed<40) {
luck.speed=40;
};
luck.timer = setTimeout(roll,luck.speed);
}
return false;
}
//闪灯效果
var num = 0;
$(".shanDeng").attr("class",function(){
setInterval(function(){
num++;
if(num%2==0){
$('#deng').addClass("shanDeng2");
}else{
$('#deng').addClass("shanDeng");
$('#deng').removeClass('shanDeng2');
}
},500)
})
var click=false;
window.onload=function(){
luck.init('luck');
$("#btn").click(function(){
//按下弹起效果
$("#btn").addClass("cjBtnDom");
setTimeout(function(){
$("#btn").removeClass("cjBtnDom");
},200);
if(click) {
return false;
}
else{
luck.speed=100;
roll();
click=true;
return false;
}
});
};
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
html5双十二手机抽奖代码.zip
版权申诉
44 浏览量
2022-11-18
22:14:05
上传
评论
收藏 283KB ZIP 举报
html5双十二手机抽奖代码.zip （20个子文件） 
html5双十二手机抽奖代码 
html5双十二手机抽奖代码.jpg 136KB jiaoben4746 css 
styleCJ.css 1KB JS jquery-1.8.3.min.js 91KB img 
shandeng1.png 6KB buttonUp.png 5KB 5.png 5KB active.png 2KB cjbg.jpg 38KB shandeng2.png 5KB 1.png 6KB title.png 36KB proBj.png 1KB 6.png 6KB 2.png 5KB 7.png 4KB 4.png 6KB buttonDown.png 5KB 8.png 6KB 3.png 5KB
index.html 4KB资源评论
