jQuery可指定奖品手机移动端大转盘抽奖代码,界面十分精美,还带中奖名单滚动效果。
js代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js" ></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js" ></script>
<script>
//只需要更换turnplate的id就可以更换相应的奖品
var turnplate={
restaraunts:["iphone x", "100话费红包", "周大福吊坠", "50个赠币", "爱奇艺月卡", "1个赠币", "欧乐B牙刷", "1个积分"], //大转盘奖品名称
rotateFlag:false, //false:停止;ture:旋转
id:1 //抽中的id 1:iphone x 2:100话费红包 3:周大福吊坠 ......
};
$(document).ready(function(){
//旋转转盘 item:奖品位置; txt:提示语;
var rotateFn = function (item, txt){
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
if(angles<270){
angles = 270 - angles;
}else{
angles = 360 - angles + 270;
}
$('.turntable_box').stopRotate();
$('.turntable_box').rotate({
angle:0,
animateTo:angles+1800+22.5,
duration:8000,
callback:function (){
alert(txt);
turnplate.rotateFlag = !turnplate.rotateFlag;
}
});
};
$('.pointer').click(function (){
if(turnplate.rotateFlag)return;
turnplate.rotateFlag = !turnplate.rotateFlag;
var item = turnplate.id;
//指针落在对应奖品区域的中心角度
rotateFn(item-2, turnplate.restaraunts[item-1]);
//console.log(item);
});
var swiper = new Swiper('.list', {
direction: 'vertical',
autoplay: true,
speed:1300,
loop:true
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791