利用jQueryRotate旋轉插件開發大轉盤抽獎

前言：

公司原來開發大轉盤抽獎活動用的是flash 我發現swf文件竟然有6m大，嚇尿了！

其實完全可以用js寫的，但是自身前端功力有限，且時間緊迫，所以直接用旋轉插件就好，兼容各方面都可以保證。

1、引用Jquery.js 、jQueryRotate.2.2.js 插件

2、html代碼：

<div style="width: 480px;margin: 0 auto;height: 480px;background:url(http://weixin.maotui.cn/web/wechat/dazhuanpan/img/2.png) no-repeat; "> 
<img id="lotteryBtn" alt="" src="http://weixin.maotui.cn/web/wechat/dazhuanpan/img/1.png" style="margin: 157px;" /> 
</div> 

3、js代碼：

參數：angle：角度

　　　duration：持續時間

  　　animateTo:旋轉的總角度

　　　callback:完成執行的

方法

　　　stopRotare():停止旋轉

　　　rotate方法如下：

<script>
    $("#lotteryBtn").click(function () {
        var angle = Math.random() * 360;
        angle = Math.ceil(angle);//0到360的隨機整數
        $("#lotteryBtn").rotate({//旋轉
            angle: 90, //角度
            duration: 6000, //持續時間
            animateTo: angle + 2160, //angle是圖片上各獎項對應的角度，2160是我要讓指針旋轉6圈。所以最后的結束的角度就是這樣子^^
            callback: function () {
                alert(angle + "度 持續時間6秒 轉了6圈！");
                window.location.href = window.location.href;
            }
        });
    });
</script>

展示地址:大轉盤

效果:

 

本文版權歸作者（謝俊）和博客園所有，歡迎轉載，轉載請標明出處。

原文地址：http://www.cnblogs.com/net-xiejun/

微信開發群

完整源碼下載：https://github.com/xiejun-net/weixin

公眾賬號：