jquery大转盘抽奖

365 阅读1分钟

GIF 2022-1-6 星期四 10-54-50.gif

 <div class="mainbj">
        <div class="box">
            <img src="static/img/zpbj.png" class="zpbjimg">
            <div class="zpimgbox">
                <img src="static/img/zp.png" class="zpimg">
            </div>
            <img src="static/img/btn1.png" class="zpbtn">
        </div>
    </div>
    
    <script src="static/jscss/jquery.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/jquery.rotate/jquery.rotate.min.js"></script>
<script>
    $(function () {
        var flog = true
        $(".zpbtn").rotate({
            bind: {
                click: function () {
                    if (flog) {
                        flog = false
                        var math = Math.floor(Math.random() * 10);
                        var sectorId = math //选中的奖品地址是需要后台传给你
                        var part = 8  //奖品的总个数
                        var defaultRotate = 1800   //一圈360度,旋转5圈
                        var setRotate = (360 / part) * sectorId - (360 / part) / 2 //计算定位到指定商品在商品的中间
                        var allRotate = defaultRotate + setRotate //总旋转度数
                        $('.zpimg').rotate({
                            duration: 10000,
                            angle: 0,
                            animateTo: allRotate,
                            callback: function () {
                                flog = true
                            }
                        })
                    }
                }
            }
        })
    })
</script>

不停旋转

       function rotate() {
        $('.zpimg').rotate({
            animateTo: 360,
            angle: 0,
            easing: function (x, t, b, c, d) {
                return c * (t / d) + b;
            },
            callback: function () {
                rotate()
            }
        })
    }
    

停止旋转

 $('.zpimg').stopRotate();
 

官网链接www.jqueryrotate.com/