利用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

公众账号：