转盘动的Rotate转盘插件 awardRotate.js"/>
【整理】jQuery 抽奖活动 指针不动转盘动的Rotate转盘插件 awardRotate.js
引用js
<script type="text/javascript" src="awardRotate.js?v=<?php echo $version;?>"></script>
js下载链接: 提取码: pqz5
html
<div class="rotate">
<img id="rotate" src="sweepstake2.png" oncontextmenu="return false;" ondragstart="return false;">
</div>
var rotateTimeOut = function (){$('#rotate').rotate({angle:0,animateTo:2160,duration:5000,callback:function (){layer('网络超时，请检查您的网络设置！');}});
};
var bRotate = false;
var rotateFn = function (angles,bools){bRotate = !bRotate;$('#rotate').stopRotate();$('#rotate').rotate({angle:0,animateTo:angles+1800,duration:5000,callback:function (){if(bools){$('[data-role="prizebox-prize"]').show();}else{$('[data-role="prizebox-noprize"]').show();}bRotate = !bRotate;}})
};
var prize = function (data){if(data.length <=0){var item = rnd(0,4);switch (item) {case 0:rotateFn(45,false);break;case 1:rotateFn(315,false);break;case 2:rotateFn(225,false);break;case 3:rotateFn(135,false);break;case 4:rotateFn(45,false);break;}}else{$('[data-role="prize-name"]').html(data.name);$('[data-role="prize-receive"]').removeClass('prizemainbtn-gray').removeAttr('disabled');switch (data.prizeid) {case "1":rotateFn( 285,true);break;case "2":rotateFn( 195,true);break;case "3":rotateFn( 105,true);break;case "4":rotateFn( 345,true);break;case "5":rotateFn( 255,true);break;case "6":rotateFn( 15,true);break;case "7":rotateFn( 75,true);break;case "8":rotateFn( 165,true);break;}}
}
完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery指针不动转盘动的Rotate转盘插件</title>
<script src=".6.4/jquery.min.js"></script>
<script src="js/awardRotate.js"></script>
</head>
<body>
<div class="turntable-bg"><div class="pointer"><img src="images/pointer.png" alt="pointer" /></div><div class="rotate"><img id="rotate" src="images/turntable.png" alt="turntable" /></div>
</div>
</body>
<script>
$(function (){var rotateTimeOut = function (){$('#rotate').rotate({angle:0,animateTo:2160,duration:8000,callback:function (){alert('网络超时，请检查您的网络设置！');}});};var bRotate = false;var rotateFn = function (awards, angles, txt){bRotate = !bRotate;$('#rotate').stopRotate();$('#rotate').rotate({angle:0,animateTo:angles+1800,duration:8000,callback:function (){alert(txt);bRotate = !bRotate;}})};$('.pointer').click(function (){if(bRotate)return;var item = rnd(0,7);switch (item) {case 0://var angle = [26, 88, 137, 185, 235, 287, 337];rotateFn(0, 337, '未中奖');break;case 1://var angle = [88, 137, 185, 235, 287];rotateFn(1, 26, '免单4999元');break;case 2://var angle = [137, 185, 235, 287];rotateFn(2, 88, '免单50元');break;case 3://var angle = [137, 185, 235, 287];rotateFn(3, 137, '免单10元');break;case 4://var angle = [185, 235, 287];rotateFn(4, 185, '免单5元');break;case 5://var angle = [185, 235, 287];rotateFn(5, 185, '免单5元');break;case 6://var angle = [235, 287];rotateFn(6, 235, '免分期服务费');break;case 7://var angle = [287];rotateFn(7, 287, '提高白条额度');break;}console.log(item);});
});
function rnd(n, m){return Math.floor(Math.random()*(m-n+1)+n)
}
</script>
</html>
其他案例写法
引用
<script src="js/zepto.min.js"></script>
<script src="js/kinerLottery.js"></script>
<link rel="stylesheet" href="css/kinerLottery.css">
<div id="box" class="box"><div class="outer KinerLottery KinerLotteryContent"><img src="./images/lanren.png"></div>
//分为三种状态：活动未开始（no-start）活动进行中(start)活动结束(completed),通过切换class切换状态，js根据class匹配状态<div class="inner KinerLotteryBtn start"></div>
</div>
//根据转盘旋转角度判断获得什么奖品
var whichAward = function(deg) {if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量return "三网通流量 10M";} else if ((deg > 30 && deg <= 90)) { //IPhone 7return "iPhone7";} else if (deg > 90 && deg <= 150) { //30M流量return "三网通流量 30M";} else if (deg > 150 && deg <= 210) { //5元话费return "话费5元";} else if (deg > 210 && deg <= 270) { //IPad mini 4return "ipad mini4";} else if (deg > 270 && deg <= 330) { //20元话费return "话费20元";}
}
var KinerLottery = new KinerLottery({rotateNum: 8, //转盘转动圈数body: "#box", //大转盘整体的选择符或zepto对象direction: 0, //0为顺时针转动,1为逆时针转动disabledHandler: function(key) {switch (key) {case "noStart":alert("活动尚未开始");break;case "completed":alert("活动已结束");break;}}, //禁止抽奖时回调clickCallback: function() {//此处访问接口获取奖品function random() {return Math.floor(Math.random() * 360);}this.goKinerLottery(random());}, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面KinerLotteryHandler: function(deg) {alert("恭喜您获得:" + whichAward(deg));} //抽奖结束回调
});
文件地址下载：js+css文件下载地址 提取码：9uyj
更多推荐
【整理】jQuery 抽奖活动 指针不动转盘动的Rotate转盘插件 awardRotate.js
发布评论