jquery 大转盘,jQueryRotate,源码

浏览数：19 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery圆形转盘抽奖</title>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <style type="text/css">
        /*背景*/
        #lottery {
            width: 450px;
            height: 450px;
            position: relative;
            background: url("images/disc-bg.gif") no-repeat scroll 0 0 transparent;
            z-index: 99991;
            margin: 0px auto;
            margin-top: 30px;
        }
            /*转盘*/
            #lottery .img {
                position: absolute;
                left: 49px;
                top: 49px;
                width: 352px;
                height: 352px;
                z-index: 99992;
            }

            /*指针*/
            #lottery .arrow {
                width: 32px;
                height: 191px;
                position: absolute;
                left: 209px;
                top: 85px;
                background: url("images/arrow.png") no-repeat scroll 0 0 transparent;
                z-index: 99993;
            }


            /*抽奖按钮*/
            #lottery .lot-btn {
                width: 92px;
                height: 92px;
                display: block;
                position: absolute;
                cursor: pointer;
                left: 179px;
                top: 183px;
                overflow: hidden;
                background: url("images/buttons_01.png") no-repeat scroll 0 0 transparent;
                z-index: 99994;
            }
    </style>
</head>
<body>
    <div id="lottery">
        <img src="images/disc-rotate.gif" class="img" />
        <div class="arrow"></div>
        <div class="lot-btn" onclick="javascript:DZP(10,6);"></div>
    </div>
</body>
</html>

<script>
    //先转n圈,选择m第个
    function DZP(n, m) {
        //停止动画
        $(‘.img‘).stopRotate();
        //转
        $(".img").rotate({
            angle: 0,  //起始角度
            animateTo: 360 * n + 26 + 52 * m,  //结束的角度
            duration: 2500, //转动时间
            callback: function () {
                //得到角度
                var r = $(‘.img‘).getRotateAngle();
            }, //回调函数
            easing: $.easing.stopRotare //定义运动的效果，需要引用jquery.easing.min.js的文件
        });
    }
</script>

源码：[email protected]

jquery 大转盘,jQueryRotate,源码,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery 大转盘,jQueryRotate,源码