现在很多网站都有抽奖活动,今天写下转盘抽奖,抽奖插件的手记,希望对您有用。
参与了微一热的活动大转盘开发,具体效果可以看官网演示:http://www.weiyr.com/dzp/info
以下为案例的微信转盘代码:
代码引用脚本
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script>
H5方面转盘简单Demo写法:
<div class="ly-plate"> <div class="rotate-bg"></div> <div class="lottery-star"><img src="rotate-static.png" id="lotteryBtn"></div> </div>
样式方面:
<style type="text/css"> *{padding:0;margin:0} body{ text-align: center; background-color: #1664ad; } .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; margin-top: 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>
转盘的前端脚本:
<script type="text/javascript"> $(function(){ var timeOut = function(){ //超时函数 $("#lotteryBtn").rotate({ angle:0, duration: 10000, animateTo: 2160, //这里是设置请求超时后返回的角度,所以应该还是回到最原始的位置,2160是因为我要让它转6圈,就是360*6得来的 callback:function(){ alert(‘网络超时‘) } }); }; var rotateFunc = function(awards,angle,text){ //awards:奖项,angle:奖项对应的角度 $(‘#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>
活动通过后端提供转盘的中奖概率,大转盘前端只需要做好UI与Js 大转盘就可以完成
基本上设计转盘没有太大难点。UI界面反而是最重要的