这是从网上找到的一个抽奖的例子，需要用到一个插件awardRotate.js，这在我的另一篇随笔中可以找到，具体步骤如下：
1、引入jquery.js、awardRotate.js以及你自己编写的index.js
2、布局index.html
<body>
<div class="turntable-bg">
<div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
<div class="rotate">
<img src="images/img1.png" width="450px" alt="" id="rotate" />
</div>
</div>
</body>
3、样式
@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 {
531px;
margin:40px auto 0 auto;
height:531px;
position:relative;
background:url("../images/turntable-bg2.png");
}
.turntable-bg .mask {
454px;
height:451px;
position:absolute;
left:116px;
top:60px;
}
.turntable-bg .pointer {
174px;
height:228px;
position:absolute;
left:50%;
top:50%;
margin-left:-94px;
margin-top:-130px;
z-index:8;
}
.turntable-bg .rotate {
450px;
height:450px;
position:absolute;
left:40px;
top:38px;
}
4、js文件编写
<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,7); 随机抽中XXX
var item = 7; // 指定抽中某个奖项
switch (item) {
case 0:
rotateFn(0, 0, '0');
break;
case 1:
rotateFn(1, 45, '1');
break;
case 2:
rotateFn(2, 90, '2');
break;
case 3:
rotateFn(3, 135, '3');
break;
case 4:
rotateFn(4, 180, '4');
break;
case 5:
rotateFn(5, 225, '5');
break;
case 6:
rotateFn(6, 270, '6');
break;
case 7:
rotateFn(6, 315, '7');
break;
}
console.log(item);
});
});
// 注意这里的rnd是随机抽奖，8个奖项是随机抽中的，但是这个是可有可无的，如果你想随机抽中那么加上这个函数；否则直接删了就行
function rnd(n, m){
return Math.floor(Math.random()*(m-n+1)+n)
}
</script>
注意：上面的var item = 7;这是指定用户抽中的奖项，可以有后台传给你