看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下
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/
下面了解下这个插件怎么使用
复制代码
复制代码
大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例
一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内
二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内
三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内
下面以一个简单demo为例子
复制代码
zp.js
复制代码
首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发
附上我的小转盘
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/
下面了解下这个插件怎么使用
- $("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度
-
- $("触发转动元素").getRotateAngle(); //返回对象当前的角度
-
- $("触发转动元素").stopRotare(); //停止旋转动画
-
- $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。
- $("触发转动元素").rotate({
- angle:0, //起始角度
- animateTo:180, //结束的角度
- duration:3000, //转动时间
- callback:function(){}, //回调函数
- easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件
- })
-
- $("触发转动元素").rotate(45); //转动45
-
- $("触发转动元素").getRotateAngle(); //返回对象当前的角度
-
- $("触发转动元素").stopRotare(); //停止旋转动画
-
- 另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。
一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内
二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内
三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内
下面以一个简单demo为例子
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
- <script type="text/javascript" src="jQueryRotate.2.2.js"></script>
- <script type="text/javascript" src="jquery.easing.min.js"></script>
- <script type="text/javascript" src="zp.js"></script>
- <style type="text/css">
- body {
- background: url(bg.png) 0 0 repeat;
- }
-
- .rotate-content {
- width: 270px;
- position: relative;
- height: 270px;
- background: url(activity-lottery-bg.png)
- no-repeat 0 0;
- background-size: 100% 100%;
- margin: 0 auto
- }
-
- .rotate-con-pan {
- background: url(disk.jpg)
- no-repeat 0 0;
- background-size: 100% 100%;
- position: relative;
- width: 255px;
- height: 255px;
- padding-top: 15px;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- margin: 0 auto
- }
-
- .rotate-con-zhen {
- width: 112px;
- height: 224px;
- background: url(start.png)
- no-repeat 0 0;
- background-size: 100% 100%;
- margin: 0 auto
- }
-
- </style>
- </head>
-
- <body>
-
- <div class="rotate-content">
- <div class="rotate-con-pan">
- <div class="rotate-con-zhen"></div>
- </div>
- </div>
- </body>
- <script type="text/javascript">
- $(function(){
- $(".rotate-con-zhen").rotate({
- bind:{
- click:function(){
- var a = runzp();
- $(this).rotate({
- duration:3000,
- angle: 0,
- animateTo:1440+a.angle,
- easing: $.easing.easeOutSine,
- callback: function(){
- alert(a.prize+a.message);
- }
- });
- }
- }
- });
- });
- </script>
- </html>
- /****************************************************
- * Author : xuyw *
- * Version: v1.0 *
- * Email : xyw10000@163.com *
- ****************************************************/
-
- function randomnum(smin, smax) {// 获取2个值之间的随机数
- var Range = smax - smin;
- var Rand = Math.random();
- return (smin + Math.round(Rand * Range));
- }
-
- function runzp() {
- var data = '[{"id":1,"prize":"590大洋","v":1.0},{"id":2,"prize":"100RMB","v":2.0},{"id":3,"prize":"安慰奖","v":48.0}]';// 奖项json
- var obj = eval('(' + data + ')');
- var result = randomnum(1, 100);
- var line = 0;
- var temp = 0;
- var returnobj = "0";
- var index = 0;
-
- //alert("随机数"+result);
- for ( var i = 0; i < obj.length; i++) {
- var obj2 = obj[i];
- var c = parseFloat(obj2.v);
- temp = temp + c;
- line = 100 - temp;
- if (c != 0) {
- if (result > line && result <= (line + c)) {
- index = i;
- // alert(i+"中奖"+line+"<result"+"<="+(line + c));
- returnobj = obj2;
- break;
- }
- }
- }
- var angle = 330;
- var message = "";
- var myreturn = new Object;
- if (returnobj != "0") {// 有奖
- message = "恭喜中奖了";
- var angle0 = [ 344, 373 ];
- var angle1 = [ 226, 256 ];
- var angle2 = [ 109, 136 ];
- switch (index) {
- case 0:// 一等奖
- var r0 = randomnum(angle0[0], angle0[1]);
- angle = r0;
- break;
- case 1:// 二等奖
- var r1 = randomnum(angle1[0], angle1[1]);
- angle = r1;
- break;
- case 2:// 三等奖
- var r2 = randomnum(angle2[0], angle2[1]);
- angle = r2;
- break;
- }
- myreturn.prize = returnobj.prize;
- } else {// 没有
- message = "再接再厉";
- var angle3 = [ 17, 103 ];
- var angle4 = [ 197, 220 ];
- var angle5 = [ 259, 340 ];
- var r = randomnum(3, 5);
- var angle;
- switch (r) {
- case 3:
- var r3 = randomnum(angle3[0], angle3[1]);
- angle = r3;
- break;
- case 4:
- var r4 = randomnum(angle4[0], angle4[1]);
- angle = r4;
- break;
- case 5:
- var r5 = randomnum(angle5[0], angle5[1]);
- angle = r5;
- break;
- }
- myreturn.prize = "继续努力!";
-
- }
- myreturn.angle = angle;
- myreturn.message = message;
- return myreturn;
- }
附上我的小转盘