<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>转盘</title>
<style>/*css样式*/
*{/*通配符，选择到所有的标签元素*/
margin:0;
padding:0;
}
body{
background:#00ffff;
}
#rotate{/* # id选择器*/
position:relative;/*相对定位*/
width:480px;/*宽*/
height:480px;/*长*/
background:url("images/2.jpg");
margin:50px auto;/*添加一个外边距*/
}
.rotateArrow{/*class类选择器*/
position:absolute;/*绝对定位*/
left:183px;/*距离参考物左端的距离*/
top:125px;/*距离参考物上端的距离*/
width:112px;
height:224px;
background:url("images/3.png");
}
.result{
display:none;/*隐藏*/
position:absolute;
left:41px;
top:188px;
width:400px;
height:100px;
background:rgba(0,0,0,0.7)/*透明颜色*/
}
.result p{
width:400px;
height:120px;
color:#fff;/*文本颜色*/
text-align:center;/*文本左右对齐：居中*/
line-height:100px;/*行高*/
}
.result i{
position:absolute;
right:0;
top:0;
width:24px;
height:24px;
background:url("images/4.png");
}
</style>
</head>
<body>
<div id="rotate">
<div class="rotateArrow"></div>
<div class="result">
<p>谢谢参与</p>
<i></i>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jQueryRotate.js"></script>
<script>/*点击旋转指针开始抽奖*/
$(".rotateArrow").click(function(){//点击实现什么功能
/*
Math.random() 生成0-1之间的随机数
Math.random()*12 生成0-12之间的随机数
Math.floor() 向下取整
*/
var n = Math.floor(Math,random()*12);//0-11之间的随机整数
switch (n)
{
case 0:
rotateFun(0,"恭喜你中了一等奖！");
break;
case 1:
rotateFun(30，"谢谢参与");
break;
case 2:
rotateFun(60,"很遗憾没中奖");
break;
case 3:
rotateFun(90,"很遗憾，要加油哦");
break;
case 4:
rotateFun(120，"恭喜你中了三等奖");
break;
case 5:
rotateFun(150，"运气先攒着");
break;
case 6:
rotateFun(180,"很遗憾没中奖");
break;
case 7:
rotateFun(210,"很遗憾，再接再厉");
break;
case 8:
rotateFun(240，"恭喜你中了二等奖");
break;
case 9:
rotateFun(270,"祝你好运");
break;
case 10:
rotateFun(300,"很遗憾没中奖");
break;
case 11:
rotateFun(330,"不要灰心");
break;
}
})
//自定义一个旋转的功能
function rotateFun (deg,text) {
$(".rotateArrow").rotate({
angle:0,//初始位置
duration:5000,//旋转的时间
animateTo: deg + 1440,//旋转多少角度
callback:function(){//当旋转结束，返回结果}
//让结果框显示
$(".result").show();
//把结果改成相应的箭头指向的结果
$(".result p").html(text);
}
})
}
//获取关闭按钮，隐藏关闭按钮隐藏结果框
$(".result i").click(function(){
//让结果框隐藏
$(".result").hide();
})
</script>
</body>
</html>
