jQuery抽奖插件 jQueryRotate

现在各大网站上都有各种抽奖活动，今天带给大家一款抽奖插件希望对您有用。

实现代码

网页中引用

1 2 3

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script>

html

1 2 3 4

<div class="ly-plate">   <div class="rotate-bg"></div>     <div class="lottery-star"><img src="rotate-static.png" id="lotteryBtn"></div> </div>

css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<style type="text/css"> *{padding:0;margin:0} body{     text-align: center;     background-color: #1664ad; } .ly-plate{     position:relative;     width:509px;     height:509px;     margin: 50px auto; } .rotate-bg{     width: 509px;     height: 509px;     background: url(ly-plate.png);     position: absolute;     top: 0;     left: 0;     margin-top: 0%; } .ly-plate div.lottery-star{     width:214px;     height:214px;     position:absolute;     top:150px;     left:147px;     /*text-indent:-999em;     overflow:hidden;     background:url(rotate-static.png);     -webkit-transform:rotate(0deg);*/     outline:none } .ly-plate div.lottery-star #lotteryBtn{     cursor: pointer;     position: absolute;     top:0;     left:0;     *left:-107px } </style>

js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<script type="text/javascript"> $(function(){     var timeOut = function(){  //超时函数         $("#lotteryBtn").rotate({             angle:0,              duration: 10000,              animateTo: 2160, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的             callback:function(){                 alert('网络超时')             }         });      };      var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度         $('#lotteryBtn').stopRotate();         $("#lotteryBtn").rotate({             angle:0,              duration: 5000,              animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^             callback:function(){                 alert(text)             }         });      };           $("#lotteryBtn").rotate({         bind:           {              click: function(){                 var time = [0,1];                     time = time[Math.floor(Math.random()*time.length)];                 if(time==0){                     timeOut(); //网络超时                 }                 if(time==1){                     var data = [1,2,3,0]; //返回的数组                         data = data[Math.floor(Math.random()*data.length)];                     if(data==1){                         rotateFunc(1,157,'恭喜您抽中的一等奖')                     }                     if(data==2){                         rotateFunc(2,247,'恭喜您抽中的二等奖')                     }                     if(data==3){                         rotateFunc(3,22,'恭喜您抽中的三等奖')                     }                     if(data==0){                         var angle = [67,112,202,292,337];                             angle = angle[Math.floor(Math.random()*angle.length)]                         rotateFunc(0,angle,'很遗憾，这次您未抽中奖')                     }                 }             }          }               });       }) </script>