js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器

淡淡的烟草味﹌ 2022-08-07 04:39 262阅读 0赞

看到网页上有不少大转盘抽奖的[应用][Link 1],心血来潮也想弄个.于是找了点资料自己研究了下  
queryRotate 这个插件就可以实现这个功能  
jqueryRotate：  
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现  
google code地址：[http://code.google.com/p/jqueryrotate/][http_code.google.com_p_jqueryrotate]  
下面了解下这个插件怎么使用

1.  $("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度  
    
2.    
    
3.  $("触发转动元素").getRotateAngle(); //返回对象当前的角度  
    
4.    
    
5.  $("触发转动元素").stopRotare(); //停止旋转动画  
    
6.    
    
7.  $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。

复制代码

1.  $("触发转动元素").rotate(\{ 　  
    
2.  　　　　  angle:0,  //起始角度  
    
3.  　　　　　animateTo:180,  //结束的角度  
    
4.  　　　　　duration:3000， //转动时间  
    
5.  　　　　　callback:function()\{\}, //回调函数  
    
6.  　　　　　easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果，需要引用jquery.easing.min.js的文件  
    
7.  　 \})  
    
8.    
    
9.  $("触发转动元素").rotate(45); //转动45  
    
10.   
    
11. $("触发转动元素").getRotateAngle(); //返回对象当前的角度  
    
12.   
    
13. $("触发转动元素").stopRotare(); //停止旋转动画  
    
14.   
    
15. 另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

复制代码

大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例  
  
  
一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内  
  
  
二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内  
  
  
三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内  
  
  
下面以一个简单demo为例子

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    
2.  <html xmlns="http://www.w3.org/1999/xhtml">  
    
3.  <head>  
    
4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    
5.  <script type="text/javascript" src="jquery-1.8.0.min.js"></script>  
    
6.  <script type="text/javascript" src="jQueryRotate.2.2.js"></script>  
    
7.  <script type="text/javascript" src="jquery.easing.min.js"></script>  
    
8.  <script type="text/javascript" src="zp.js"></script>  
    
9.  <style type="text/css">  
    
10. body \{  
    
11.         background: url(bg.png) 0 0 repeat;  
    
12. \}  
    
13.   
    
14. .rotate-content \{  
    
15.         width: 270px;  
    
16.         position: relative;  
    
17.         height: 270px;  
    
18.         background: url(activity-lottery-bg.png)  
    
19.                 no-repeat 0 0;  
    
20.         background-size: 100% 100%;  
    
21.         margin: 0 auto  
    
22. \}  
    
23.   
    
24. .rotate-con-pan \{  
    
25.         background: url(disk.jpg)  
    
26.                 no-repeat 0 0;  
    
27.         background-size: 100% 100%;  
    
28.         position: relative;  
    
29.         width: 255px;  
    
30.         height: 255px;  
    
31.         padding-top: 15px;  
    
32.         box-sizing: border-box;  
    
33.         -moz-box-sizing: border-box;  
    
34.         -webkit-box-sizing: border-box;  
    
35.         margin: 0 auto  
    
36. \}  
    
37.   
    
38. .rotate-con-zhen \{  
    
39.         width: 112px;  
    
40.         height: 224px;  
    
41.         background: url(start.png)  
    
42.                 no-repeat 0 0;  
    
43.         background-size: 100% 100%;  
    
44.         margin: 0 auto  
    
45. \}  
    
46.   
    
47. </style>  
    
48. </head>  
    
49.   
    
50. <body>  
    
51.   
    
52. <div class="rotate-content">  
    
53.                                                 <div class="rotate-con-pan">  
    
54.                                                         <div class="rotate-con-zhen"></div>  
    
55.                                                 </div>  
    
56.                                         </div>  
    
57. </body>  
    
58. <script type="text/javascript">  
    
59. $(function()\{  
    
60.         $(".rotate-con-zhen").rotate(\{  
    
61.                 bind:\{  
    
62.                         click:function()\{  
    
63.                                 var a = runzp();  
    
64.                                  $(this).rotate(\{  
    
65.                                                  duration:3000,  
    
66.                                                  angle: 0,   
    
67.                                     animateTo:1440+a.angle,  
    
68.                                                 easing: $.easing.easeOutSine,  
    
69.                                                 callback: function()\{  
    
70.                                                         alert(a.prize+a.message);  
    
71.                                                 \}  
    
72.                                  \});  
    
73.                         \}  
    
74.                 \}  
    
75.         \});  
    
76. \});  
    
77. </script>  
    
78. </html>

复制代码

zp.js

1.  /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
    
2.  \*         Author :        xuyw                            \*  
    
3.  \*         Version:   v1.0                            \*  
    
4.  \*   Email  :   xyw10000@163.com                    \*  
    
5.  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/  
    
6.    
    
7.  function randomnum(smin, smax) \{// 获取2个值之间的随机数  
    
8.          var Range = smax - smin;  
    
9.          var Rand = Math.random();  
    
10.         return (smin + Math.round(Rand \* Range));  
    
11. \}  
    
12.   
    
13. function runzp() \{  
    
14.         var data = '\[\{"id":1,"prize":"590大洋","v":1.0\},\{"id":2,"prize":"100RMB","v":2.0\},\{"id":3,"prize":"安慰奖","v":48.0\}\]';// 奖项json  
    
15.         var obj = eval('(' + data + ')');  
    
16.         var result = randomnum(1, 100);  
    
17.         var line = 0;  
    
18.         var temp = 0;  
    
19.         var returnobj = "0";  
    
20.         var index = 0;  
    
21.   
    
22.         //alert("随机数"+result);  
    
23.         for ( var i = 0; i < obj.length; i++) \{  
    
24.                 var obj2 = obj\[i\];  
    
25.                 var c = parseFloat(obj2.v);  
    
26.                 temp = temp + c;  
    
27.                 line = 100 - temp;  
    
28.                 if (c != 0) \{  
    
29.                         if (result > line && result <= (line + c)) \{  
    
30.                                 index = i;  
    
31.                                 // alert(i+"中奖"+line+"<result"+"<="+(line + c));  
    
32.                                 returnobj = obj2;  
    
33.                                 break;  
    
34.                         \}  
    
35.                 \}  
    
36.         \}  
    
37.         var angle = 330;  
    
38.         var message = "";  
    
39.         var myreturn = new Object;  
    
40.         if (returnobj != "0") \{// 有奖  
    
41.                 message = "恭喜中奖了";  
    
42.                 var angle0 = \[ 344, 373 \];  
    
43.                 var angle1 = \[ 226, 256 \];  
    
44.                 var angle2 = \[ 109, 136 \];  
    
45.                 switch (index) \{  
    
46.                 case 0:// 一等奖  
    
47.                         var r0 = randomnum(angle0\[0\], angle0\[1\]);  
    
48.                         angle = r0;  
    
49.                         break;  
    
50.                 case 1:// 二等奖  
    
51.                         var r1 = randomnum(angle1\[0\], angle1\[1\]);  
    
52.                         angle = r1;  
    
53.                         break;  
    
54.                 case 2:// 三等奖  
    
55.                         var r2 = randomnum(angle2\[0\], angle2\[1\]);  
    
56.                         angle = r2;  
    
57.                         break;  
    
58.                 \}  
    
59.                 myreturn.prize = returnobj.prize;  
    
60.         \} else \{// 没有  
    
61.                 message = "再接再厉";  
    
62.                 var angle3 = \[ 17, 103 \];  
    
63.                 var angle4 = \[ 197, 220 \];  
    
64.                 var angle5 = \[ 259, 340 \];  
    
65.                 var r = randomnum(3, 5);  
    
66.                 var angle;  
    
67.                 switch (r) \{  
    
68.                 case 3:  
    
69.                         var r3 = randomnum(angle3\[0\], angle3\[1\]);  
    
70.                         angle = r3;  
    
71.                         break;  
    
72.                 case 4:  
    
73.                         var r4 = randomnum(angle4\[0\], angle4\[1\]);  
    
74.                         angle = r4;  
    
75.                         break;  
    
76.                 case 5:  
    
77.                         var r5 = randomnum(angle5\[0\], angle5\[1\]);  
    
78.                         angle = r5;  
    
79.                         break;  
    
80.                 \}  
    
81.                 myreturn.prize = "继续努力!";  
    
82.   
    
83.         \}  
    
84.         myreturn.angle = angle;  
    
85.         myreturn.message = message;  
    
86.         return myreturn;  
    
87. \}

复制代码

首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发  
  
  
附上我的小转盘

![2(1).jpg][2_1_.jpg]

![3(1).jpg][3_1_.jpg]

via：[http://www.zuidaima.com/share/1779633798073344.htm][http_www.zuidaima.com_share_1779633798073344.htm]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=20
[http_code.google.com_p_jqueryrotate]: http://code.google.com/p/jqueryrotate/
[2_1_.jpg]: http://bbs.html5cn.org/data/attachment/forum/201408/08/095146q3pbiilcn3fqi5cf.jpg
[3_1_.jpg]: http://bbs.html5cn.org/data/attachment/forum/201408/08/095215778zm2dd11kcy2si.jpg
[http_www.zuidaima.com_share_1779633798073344.htm]: http://www.zuidaima.com/share/1779633798073344.htm