转盘抽奖
Posted 小菜波
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了转盘抽奖相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.dialWrap { position:absolute; left:50%; top:24px; width:460px; height:460px; margin-left:-246px; }
.dialWrap .dial { position:relative; z-index:1; width:100%; height:100%; background:url(sprite.png) no-repeat -200px 0; }
.dialWrap .dialBtn { position:absolute; z-index:2; left:50%; top:50%; width:121px; height:154px; margin:-95px 0 0 -60px; background:url(sprite.png) no-repeat 0 -150px; cursor:pointer; }
.dialWrap .dialBtn .text { position:absolute; left:50%; top:50%; width:57px; height:63px; margin:-18px 0 0 -28px; background:url(sprite.png) no-repeat 0 -400px; }
</style>
</head>
<body>
<div class="dialWrap">
<div class="dial" id="dial"></div>
<div class="dialBtn" id="dialBtn">
<p class="text"></p>
</div>
</div>
<script type="text/javascript" src="lib2/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="lib2/jQueryRotate.2.2.js" ></script>
<script type="text/javascript">
var data
$(function(){
var rotateFunc=function(awards,angle,text){
$("#dial").stopRotate();
$("#dial").rotate({
angle:0,
animateTo:angle+1440,
duration:4000,
callback:function(){
alert(text)
}
})
}
$("#dialBtn").rotate({
bind:{
click:function(){
data = [1,2,3,4,5,6,7,8]; //返回的数组
data = data[Math.floor(Math.random()*data.length)];
if(data==1){
rotateFunc(1,337.5,‘恭喜您抽中的四等奖‘)
}
if(data==2){
rotateFunc(2,292.5,‘恭喜您抽中的三等奖‘)
}
if(data==3){
rotateFunc(3,247.5,‘恭喜您抽中的二等奖‘)
}
if(data==4){
rotateFunc(4,202.5,‘恭喜您抽中的四等奖‘)
}
if(data==5){
rotateFunc(5,157.5,‘恭喜您抽中的三等奖‘)
}
if(data==6){
rotateFunc(6,112.5,‘恭喜您抽中的二等奖‘)
}
if(data==7){
rotateFunc(7,67.5,‘恭喜您抽中的一等奖‘)
}
if(data==8){
rotateFunc(8,22.5,‘恭喜您抽中的二等奖‘)
}
}
}
})
})
</script>
</body>
</html>
以上是关于转盘抽奖的主要内容，如果未能解决你的问题，请参考以下文章