首页>>Jquery文字>>jQuery幸运大转盘抽奖活动代码(2018-11-25)

jQuery幸运大转盘抽奖活动代码

jQuery幸运大转盘抽奖活动代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 XML/HTML Code

  1. <div class="turntable-bg">  
  2.     <!--<div class="mask"><img src="images/award_01.png"/></div>-->  
  3.     <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>  
  4.     <div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"/></div>  
  5. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function (){  
  3.   
  4.     var rotateTimeOut = function (){  
  5.         $('#rotate').rotate({  
  6.             angle:0,  
  7.             animateTo:2160,  
  8.             duration:8000,  
  9.             callback:function (){  
  10.                 alert('网络超时，请检查您的网络设置！');  
  11.             }  
  12.         });  
  13.     };  
  14.     var bRotate = false;  
  15.   
  16.     var rotateFn = function (awards, angles, txt){  
  17.         bRotate = !bRotate;  
  18.         $('#rotate').stopRotate();  
  19.         $('#rotate').rotate({  
  20.             angle:0,  
  21.             animateTo:angles+1800,  
  22.             duration:8000,  
  23.             callback:function (){  
  24.                 alert(txt);  
  25.                 bRotate = !bRotate;  
  26.             }  
  27.         })  
  28.     };  
  29.   
  30.     $('.pointer').click(function (){  
  31.   
  32.         if(bRotate)return;  
  33.         var item = rnd(0,7);  
  34.   
  35.         switch (item) {  
  36.             case 0:  
  37.                 //var angle = [26, 88, 137, 185, 235, 287, 337];  
  38.                 rotateFn(0, 337, '未中奖');  
  39.                 break;  
  40.             case 1:  
  41.                 //var angle = [88, 137, 185, 235, 287];  
  42.                 rotateFn(1, 26, '免单4999元');  
  43.                 break;  
  44.             case 2:  
  45.                 //var angle = [137, 185, 235, 287];  
  46.                 rotateFn(2, 88, '免单50元');  
  47.                 break;  
  48.             case 3:  
  49.                 //var angle = [137, 185, 235, 287];  
  50.                 rotateFn(3, 137, '免单10元');  
  51.                 break;  
  52.             case 4:  
  53.                 //var angle = [185, 235, 287];  
  54.                 rotateFn(4, 185, '免单5元');  
  55.                 break;  
  56.             case 5:  
  57.                 //var angle = [185, 235, 287];  
  58.                 rotateFn(5, 185, '免单5元');  
  59.                 break;  
  60.             case 6:  
  61.                 //var angle = [235, 287];  
  62.                 rotateFn(6, 235, '免分期服务费');  
  63.                 break;  
  64.             case 7:  
  65.                 //var angle = [287];  
  66.                 rotateFn(7, 287, '提高白条额度');  
  67.                 break;  
  68.         }  
  69.   
  70.         console.log(item);  
  71.     });  
  72. });  
  73. function rnd(n, m){  
  74.     return Math.floor(Math.random()*(m-n+1)+n)  
  75. }  
  76. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_725.html