<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖</title>
<style>
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.turntable-bg {
width:531px;
margin:40px auto 0 auto;
height:531px;
position:relative;
background:url("../images/turntable-bg2.png");
}
.turntable-bg .mask {
width:454px;
height:451px;
position:absolute;
left:116px;
top:60px;
/*z-index:9;*/
}
.turntable-bg .pointer {
width:174px;
height:228px;
position:absolute;
left:50%;
top:50%;
margin-left:-94px;
margin-top:-130px;
z-index:8;
}
.turntable-bg .rotate {
width:450px;
height:450px;
position:absolute;
left:40px;
top:38px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script type="text/javascript">
$(function (){
var rotateTimeOut = function (){
$('#rotate').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时,请检查您的网络设置!');
}
});
};
var bRotate = false;
var rotateFn = function (awards, angles, txt){
bRotate = !bRotate;
$('#rotate').stopRotate();
$('#rotate').rotate({
angle:0,
animateTo:angles+1800,
duration:3000,
callback:function (){
alert(txt);
bRotate = !bRotate;
}
})
};
$('.pointer').click(function (){
if(bRotate)return;
var item = rnd(0,8);
switch (item) {
case 0:
//var angle = [26, 88, 137, 185, 235, 287, 337];
rotateFn(0, 337, '未中奖');
break;
case 1:
//var angle = [88, 137, 185, 235, 287];
rotateFn(1, 26, '一等奖');
break;
case 2:
//var angle = [137, 185, 235, 287];
rotateFn(2, 88, '二等奖');
break;
case 3:
//var angle = [137, 185, 235, 287];
rotateFn(3, 137, '三等奖');
break;
case 4:
//var angle = [185, 235, 287];
rotateFn(4, 185, '四等奖');
break;
case 5:
//var angle = [235, 287];
rotateFn(5, 235, '五等奖');
break;
case 6:
//var angle = [287];
rotateFn(6, 287, '安慰奖');
break;
}
console.log(item);
});
});
function rnd(n, m){
return Math.floor(Math.random()*(m-n+1)+n)
}
</script>
</head>
<body>
<div class="turntable-bg">
<!--<div class="mask"><img src="images/award_01.png"/></div>-->
<div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
<div class="rotate" ><img id="rotate" src="images/turntable2.png" alt="turntable"/></div>
</div>
</body>
</html>
通过在H5EDU的学习,我会给大家分享更多源码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖</title>
<style>
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.turntable-bg {
width:531px;
margin:40px auto 0 auto;
height:531px;
position:relative;
background:url("../images/turntable-bg2.png");
}
.turntable-bg .mask {
width:454px;
height:451px;
position:absolute;
left:116px;
top:60px;
/*z-index:9;*/
}
.turntable-bg .pointer {
width:174px;
height:228px;
position:absolute;
left:50%;
top:50%;
margin-left:-94px;
margin-top:-130px;
z-index:8;
}
.turntable-bg .rotate {
width:450px;
height:450px;
position:absolute;
left:40px;
top:38px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script type="text/javascript">
$(function (){
var rotateTimeOut = function (){
$('#rotate').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时,请检查您的网络设置!');
}
});
};
var bRotate = false;
var rotateFn = function (awards, angles, txt){
bRotate = !bRotate;
$('#rotate').stopRotate();
$('#rotate').rotate({
angle:0,
animateTo:angles+1800,
duration:3000,
callback:function (){
alert(txt);
bRotate = !bRotate;
}
})
};
$('.pointer').click(function (){
if(bRotate)return;
var item = rnd(0,8);
switch (item) {
case 0:
//var angle = [26, 88, 137, 185, 235, 287, 337];
rotateFn(0, 337, '未中奖');
break;
case 1:
//var angle = [88, 137, 185, 235, 287];
rotateFn(1, 26, '一等奖');
break;
case 2:
//var angle = [137, 185, 235, 287];
rotateFn(2, 88, '二等奖');
break;
case 3:
//var angle = [137, 185, 235, 287];
rotateFn(3, 137, '三等奖');
break;
case 4:
//var angle = [185, 235, 287];
rotateFn(4, 185, '四等奖');
break;
case 5:
//var angle = [235, 287];
rotateFn(5, 235, '五等奖');
break;
case 6:
//var angle = [287];
rotateFn(6, 287, '安慰奖');
break;
}
console.log(item);
});
});
function rnd(n, m){
return Math.floor(Math.random()*(m-n+1)+n)
}
</script>
</head>
<body>
<div class="turntable-bg">
<!--<div class="mask"><img src="images/award_01.png"/></div>-->
<div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
<div class="rotate" ><img id="rotate" src="images/turntable2.png" alt="turntable"/></div>
</div>
</body>
</html>
通过在H5EDU的学习,我会给大家分享更多源码