js实现转盘抽奖

大转盘抽奖，主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现。

通常，抽奖的过程需要渐进的效果，所以直接通过旋转属性写比较繁琐。

这里推荐一款插件：http://www.jqueryrotate.com/

使用jqueryRotate插件来实现旋转，可以设置持续时间和曲线，上手快，兼容强。

方法：

rotate(angle);

rotate(parameters);

getRotateAngle();

stopRotate();

1、rotate(0deg)直接传一个角度。

2、rotate(parameters)，可选值如下：

参数名 类型 说明
angle Number 旋转到指定的角度，不带动画，默认是0
animateTo Number 旋转到指定的角度，使用动画
bind Object 可以传入一个对象，作为事件绑定到元素上。
center Array 用来设定旋转的中心，传入的数组是[X,Y]格式的，可以使用数值[100,100]或者百分比[“50%”,“50%”]，默认是以元素的中心点旋转
duration Number 指定动画的持续时间，默认是1000毫秒
step Function 传入一个回调函数在动画的每一步都会调用一下
easing Function 让动画看起来更自然，感觉用不到，而且本人对图形学没啥研究，感兴趣的官网有详细描述，就不再深究了….
callback Function 当动画完成时的回调函数。

3、getRotateAngle()   获取当前的角度。

4、stopRatate() 停止旋转

关于jqueryRotate的使用可以多查文档，以下为用jqueryRotate.js实现的简易大转盘，需要引入jquery.js和jqueryRotate.js。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="x5-orientation" content="portrait">
        <title>大转盘</title>

    </head>

    <style>
        .box {
            margin: 6vh auto;
            width: 80vw;
            height: 80vw;
            position: relative;
            border-radius: 100%;
            display: flex;
            flex-flow: row wrap;
            overflow: hidden;
        }
        
        .draw_item {
            width: 40vw;
            height: 40vw;
            text-align: center;
            line-height: 40vw;
            font-size: 3vw;
            color: #fff;
        }
        
        .needle {
            position: absolute;
            top: 36vw;
            left: 25vw;
            width: 30vw;
            height: 6vw;
            font-size: 6vw;
            color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 6vw;
        }
        
        button{
            width: 20vw;
            height: 8vw;
            margin: auto;
            display: block;
        }
        
    </style>

    <body>

        <div class="box">
            <div class="draw_item" style="background: red;">谢谢参与</div>
            <div class="draw_item" style="background: orange;">热门电影票</div>
            <div class="draw_item" style="background: green;">品牌优惠券</div>
            <div class="draw_item" style="background: blue;">限量版公仔</div>
            <div class="needle">----></div>
        </div>

        <button id="btn">开启转盘</button>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/jQueryRotate.js"></script>

        <script>
            
            //是否可以抽奖
            var bRotate = true;

            var rotateFn = function(awards, angles, txt) {

                $('.needle').stopRotate();
                $('.needle').rotate({
                    angle: 0,
                    animateTo: angles + 2520,
                    duration: 7000,
                    callback: function() {

                        //抽奖结果
                        alert(txt);

                    }
                })
            };

            $('#btn').click(function() {

                if(!bRotate){
                    alert("没有抽奖机会了");
                    return;
                }
                var item = 0;
                bRotate = !bRotate;
                switch(item) {
                    case 0:
                        rotateFn(0, 225, '谢谢参与');
                        break;
                    case 1:
                        rotateFn(1, 315, '热门电影票');
                        break;
                    case 2:
                        rotateFn(2, 135, '品牌优惠券');
                        break;
                    case 3:
                        rotateFn(3, 45, '限量版公仔');
                        break;

                }

            });
        </script>

    </body>

</html>

效果如下：

 

 

posted @ 2019-08-20 15:56  南之骄阳  阅读(4029)  评论(0)  编辑  收藏  举报