一款漂亮的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>
暂无评论内容