码迷,mamicode.com
首页 > 其他好文 > 详细

转盘抽奖

时间:2017-06-30 23:57:32      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:random   type   width   pos   function   llb   margin   int   min   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
    <title></title>
  <style>
       .dialWrap { position:absolute; left:50%; top:24px; width:460px; height:460px; margin-left:-246px; }
       .dialWrap .dial { position:relative; z-index:1; width:100%; height:100%; background:url(sprite.png) no-repeat -200px 0; }
       .dialWrap .dialBtn { position:absolute; z-index:2; left:50%; top:50%; width:121px; height:154px; margin:-95px 0 0 -60px; background:url(sprite.png) no-repeat 0 -150px; cursor:pointer; }
      .dialWrap .dialBtn .text { position:absolute; left:50%; top:50%; width:57px; height:63px; margin:-18px 0 0 -28px; background:url(sprite.png) no-repeat 0 -400px; }
  </style>
  </head>
<body>
     <div class="dialWrap">
      <div class="dial" id="dial"></div>
         <div class="dialBtn" id="dialBtn">
        <p class="text"></p>
       </div>
      </div>
<script type="text/javascript" src="lib2/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="lib2/jQueryRotate.2.2.js" ></script>
<script type="text/javascript">
  var data
    $(function(){
      var rotateFunc=function(awards,angle,text){
        $("#dial").stopRotate();
        $("#dial").rotate({
          angle:0,
          animateTo:angle+1440,
          duration:4000,
          callback:function(){
            alert(text)
          }
         })
      }
    $("#dialBtn").rotate({
      bind:{
        click:function(){
          data = [1,2,3,4,5,6,7,8]; //返回的数组
          data = data[Math.floor(Math.random()*data.length)];
          if(data==1){
            rotateFunc(1,337.5,‘恭喜您抽中的四等奖‘)
          }
          if(data==2){
            rotateFunc(2,292.5,‘恭喜您抽中的三等奖‘)
          }
          if(data==3){
            rotateFunc(3,247.5,‘恭喜您抽中的二等奖‘)
          }
          if(data==4){
            rotateFunc(4,202.5,‘恭喜您抽中的四等奖‘)
          }
          if(data==5){
            rotateFunc(5,157.5,‘恭喜您抽中的三等奖‘)
          }
          if(data==6){
            rotateFunc(6,112.5,‘恭喜您抽中的二等奖‘)
          }
          if(data==7){
            rotateFunc(7,67.5,‘恭喜您抽中的一等奖‘)
          }
          if(data==8){
            rotateFunc(8,22.5,‘恭喜您抽中的二等奖‘)
          }
        }
      }

    })
  })
</script>
</body>
</html>

转盘抽奖

标签:random   type   width   pos   function   llb   margin   int   min   

原文地址:http://www.cnblogs.com/xcbk/p/7100808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!