xyw10000
2014-04-14 14:00:01
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下
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>
zp.js
/**************************************************** * 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; }
首先 转盘的角度取决于图片,转盘的业务决定代码复杂度.望各位根据实际情况开发
附上我的小转盘
由最代码官方编辑于2016-4-16 16:47:08
猜你喜欢
- jQuery滚动大转盘抽奖特效代码
- jquery幸运观众头像随机抽奖代码
- js框架jquery+layer弹窗实现登录、抽奖手机端程序代码,兼容多种手机
- jQuery+CSS3开发实现红色喜庆抽奖网页特效源代码分享
- js框架jquery+layer弹窗实现手机端登录、刮刮卡抽奖程序代码,兼容多种手机
- js框架jquery+layer弹窗实现登录、手机端老虎机抽奖程序代码,兼容多种手机
- jQuery年会抽奖代码
- js框架jquery+layer弹窗实现登录、转动抽奖程序代码,兼容多种浏览器
- js框架jquery实现灯光圆盘抽奖程序活动特效
- jquery圆盘抽奖特效
- jquery公司抽奖程序
- jquery公司抽奖程序 (抽取两个)
请下载代码后再发表评论
文件名:test.rar,文件大小:215.503K
下载
- /
- /test
- /test/1.html
- /test/bg.png
- /test/disk.jpg
- /test/jQueryRotate.2.2.js
- /test/jquery-1.8.0.min.js
- /test/jquery.easing.min.js
- /test/start.png
- /test/zp.js
- /test

- 证 jquery生成图片验证码
- 原证 jquery编写的alert弹窗插件带模式化窗口,支持$.alert({参数})语法,支持拖拽
- 证 jquery实现鼠标移动到图片上缩小图片并显示图片说明特效源代码下载
- 证精 sina微博表情插件源码下载(jquery)
- 精心挑选的22款精美jquery特效
- Ajax+JQuery留言特效
- 证 分享一个jquery的分页插件代码
- 证 jQuery/CSS3实现拼图效果的相册插件
- Jquery超酷的日,周,月日程安排插件源码分享
- 证 jquery简单mp3在线音乐播放器
- 证 Jquery实现QWERTY软键盘插件
- 证 jquery特效集锦 包含多种插件展示效果

天天 LV9
2024年5月26日
Seaskye LV14
2023年11月4日
最新版 LV4
2023年2月6日
快乐的程序员 LV25
2023年1月21日
2374347637 LV13
2022年12月30日
fdscdsx创新文件夹 LV11
2022年10月23日
shnb2333 LV1
2022年8月31日
jlmarket LV22
2022年6月29日
winrh233 LV11
2022年1月28日
ming_123_9715 LV23
2022年1月19日

benben2020
3月19日
暂无贡献等级
SZEPEZS LV9
3月4日
yeshangjun
3月1日
暂无贡献等级
哦哦怕怕 LV11
2024年10月25日
傲世彩云之南 LV5
2024年6月27日
天天 LV9
2024年5月26日
yellow_flowers LV8
2024年5月16日
2860615178 LV4
2024年4月30日
srmess LV4
2024年4月11日
Gin19960217 LV4
2024年3月20日