《jquery实现幸运大转盘抽奖程序代码.docxVIP

jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究了下queryRotate 这个插件就可以实现这个功能jqueryRotate：支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现google code地址：/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 /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /script type=text/javascript src=jquery-1.8.0.min.js/scriptscript type=text/javascript src=jQueryRotate.2.2.js/scriptscript type=text/javascript src=jquery.easing.min.js/scriptscript type=text/javascript src=zp.js/scriptstyle type=text/cssbody {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/headbodydiv cla