程序博客网 > 深圳益讯网络

抽奖大转盘

来源：互联网发布：深圳益讯网络编辑：程序博客网时间：2024/05/01 01:13

<style>
*{padding:0;margin:0}
body{
text-align:center
}
.ly-plate{
position:relative;
width:509px;
height:509px;
margin: 50px auto;
}
.rotate-bg{
width:509px;
height:509px;
background:url(ly-plate.png);
position:absolute;
top:0;
left:0
}
.ly-plate div.lottery-star{
width:214px;
height:214px;
position:absolute;
top:150px;
left:147px;
/*text-indent:-999em;
overflow:hidden;
background:url(rotate-static.png);
-webkit-transform:rotate(0deg);*/
outline:none
}
.ly-plate div.lottery-star #lotteryBtn{
cursor: pointer;
position: absolute;
top:0;
left:0;
*left:-107px
}

</style>

<body> <div class="ly-plate"> <div class="rotate-bg"></div> <div class="lottery-star"><img src="css/images/rotatingdisc.png" id="lotteryBtn"></div> </div>

</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jQueryRotate.2.2.js"></script>
<script>
$(function(){
var timeOut = function(){ //超时函数
$("#lotteryBtn").rotate({
angle:0,
duration: 20000,
animateTo: 2160, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的
callback:function(){
alert('网络超时')
}
});
};
var rotateFunc = function(awards,angle,text){ //awards:奖项，angle:奖项对应的角度，text:提示文字
$('#lotteryBtn').stopRotate();
$("#lotteryBtn").rotate({
angle:0,
duration: 5000,
animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
callback:function(){
alert(text) }
});
};
   $("#lotteryBtn").rotate({
bind:
{
click: function(){
var time = [0,1];
time = time[Math.floor(Math.random()*time.length)];
if(time==0){
timeOut(); //网络超时
}
if(time==1){
var data = [1,2,3,0]; //返回的数组
data = data[Math.floor(Math.random()*data.length)];

if(data==1){
rotateFunc(1,157,'恭喜您抽中一等奖')
}
if(data==2){
rotateFunc(2,247,'恭喜您抽中二等奖)
}
if(data==3){
rotateFunc(3,22,'恭喜您抽中三等奖')
}
if(data==0){
var angle = [67,112,202,292,337];
angle = angle[Math.floor(Math.random()*angle.length)]
rotateFunc(0,angle,'很遗憾，这次您未抽中奖')
} } } }
});
})
</script>
</html

0 0

深圳益讯网络

深圳益讯网络

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子青春期掉头发怎么办青春期头发少怎么办移动冰淇淋套餐怎么办通话时间用完了怎么办汽修厂营业执照怎么办对人生绝望怎么办去明新中学后悔怎么办修车没修好怎么办留学生学费汇票怎么办高职单招滑档怎么办高职单招没考上怎么办考不上高中学籍怎么办中考如果落榜怎么办分数139怎么办没有大学文凭怎么办幸福树移盆伤根怎么办汽修证不在了怎么办桐庐网上投诉怎么办金杯油耗高怎么办汽车电脑板锁死怎么办汽车怠速低熄火怎么办摩托车太耗油怎么办轿车有时怠速高怎么办发动机转速过高怎么办发动机怠速高怎么办能力弱怎么办农村怎么办养老保险平安银行贷款怎么办海尔空调漏水怎么办挂机空调漏水怎么办台式空调漏水怎么办空调排水滴水怎么办空调不排水怎么办空调里面滴水怎么办空调忽然滴水怎么办空调突然滴水怎么办空调排水管滴水怎么办室内机滴水怎么办马桶松动了怎么办空调管漏水怎么办太阳能滴水怎么办