今天遇到朋友要我给他写个双转盘抽奖功能,需要要两个转盘联动。不好推却得我只能开始动手了,图片什么的都是在网上找的。
首先抽奖这玩意的奖品控制当然是在后台啦,不然安全性就太低了。所以我选择先有抽奖结果,再转动转盘。
线上demo:https://my.weblf.cn/xly/demo/choujiang/zhuanpan.html
废话不多说,先上代码
css:
*{
margin: 0;padding: 0;
}
#parent{
position: relative;
width: 300px;
height: 300px;
margin-left:200px;
}
#rotate{
width: 300px;
height: 300px;
transition: all 3s;
}
#rotate>img{display:block;width:100%;height:100%;}
#zhen{
position: absolute;
left: 50%;
top: 85px;
width: 80px;
margin-left:-40px;
}
#zhen>img{display:block;width:100%;}
.aa{
width: 130px;
}
#zhuanpan_small{position:absolute;width:150px;height:150px;display:block;left:70px;top:68px;transition:all 3s;}
html:
<img src="chilun1.png" id="zhuanpan_small"/>
<div id="parent">
<div id="rotate"><img src="chilun3.png"></div>
<div id="zhen"><img class="aa" src="zhizhen.png"></div>
</div>
js为了省事引用了jq框架,实际上只用来给元素添加样式和点击事件,不喜欢的同学也可改成原生的。
$(function(){
var bTag = 3;//剩余点击次数,这个实际应该从后台获取
var boot_item='';//上一次抽奖的结果
var boot_deg=0;//上次旋转角度
$('#zhen').click(function(){
if(bTag==0){
alert('没有机会了');
}else{
var item = Math.floor( Math.random()*6);//模拟本次抽奖的结果(0~5),实际应从后台获取
//弹框是debug模式,可自行拿掉
if(item==0){//米
alert('米');
}
if(item==1){//黄包
alert('黄包');
}
if(item==2){//伞
alert('伞');
}
if(item==3){//包
alert('包');
}
if(item==4){//伞
alert('伞');
}
if(item==5){//paid
alert('paid');
}
if(boot_item==''){//如果是第一次旋转
var aa=boot_deg+1800+item*60+'deg';//要旋转的角度,每次默认先旋转5圈(360*5=1800)
boot_item=item;//保存本次抽奖结果
boot_deg=parseInt(aa);//保存本次抽奖旋转读书
}else{//不是第一次旋转
var aa=boot_deg+1800+(item-boot_item)*60+'deg';
boot_item=item;
boot_deg=parseInt(aa);
}
bTag--;//模拟剩余抽奖次数,实际应从后台获取
}
//开始旋转,大转盘与小转盘的旋转圈数为齿轮之比,这里大转盘的齿轮是小转盘的2倍,因此小转盘的旋转度数*2
var cc = "rotate("+aa+")";
var dd="rotate("+-2*parseInt(aa)+"deg)";
console.log(cc);
$("#rotate").css({'transform':cc})
$("#zhuanpan_small").css({'transform':dd})
})
})
截图: