网页转盘抽奖(至尊门花花)

显示全部楼层 · 2014-11-19 15:39:08

本帖最后由修身以求齐家于 2014-11-20 22:06 编辑

HTML：
<body>
<div class="rotate-pan">
      <img class="rotate-zhen" src="image/1.bmp" />
      <img class="rotate-lottery" src="image/beginLottery.png" />
</div>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.rotate.min.js" type="text/javascript"></script>
<script src="Scripts/Zp.js" type="text/javascript"></script>
<script type="text/javascript">
      $(function () {
         $(".rotate-lottery").bind({
            click: function () {
                  var a = runZp();
                  alert("旋转的度数："+a.angle);
                  $(".rotate-zhen").rotate({
                     duration: 3000,//旋转时间
                     angle: 0,//旋转的起始度数
                     animateTo: a.angle,//旋转到哪个的度数
                     callback: function () {
                        alert(a.message);//弹出消息是否中奖，，现在只是测试！！数据没有放在数据库。只是演示而已。
                     }
                  });
            }
         });
      });
</script>
</body>
CSS:
/***参与免单抽奖界面****/
.rotate-pan{ background:url(../image/ZhuanPan.png) no-repeat 0 0;width:160px;height:160px;position:absolute;background-size:100% 100%;margin-top:60%;margin-left:20%;}
.rotate-zhen{ width:3px;height:150px;margin:0 auto;position:absolute;margin-top:0px;margin-left:-5px;}
.rotate-lottery{width:40px;height:12px;margin-left:-20px;margin-top:85px;position:absolute;}