css3js实现h5转盘抽奖

预览（请再chrome模拟手机模式打开）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <style>
        .pan {
            width: 5.73rem;
            height: 6.71rem;
            background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-back.png) no-repeat 50% 50%/100%;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
        }
        .scroll {
            position: absolute;
            width: 4.78rem;
            height: 4.77rem;
            left: 50%;
            top: 0.47rem;
            background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-table.png) no-repeat 50% 50%/100%;
            z-index: 2;
            transform: translateX(-50%);
            /*transition: all 2111ms linear;*/
        }
        .row {
            position: absolute;
            left: 50%;
            top: 1.75rem;
            width: 1.59rem;
            height: 1.9rem;
            background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-start.png) no-repeat 50% 50%/100%;
            z-index: 3;
            transform: translateX(-50%);
        }
    </style>
    <script>
        window.onresize = r;
        function r(resizeNum){
            var winW = window.innerWidth,
                html = document.querySelector('html');
            html.style.fontSize = winW*0.15625+'px';
            //修复小米等小字体出现的布局bug
            var fontSize = parseFloat(html.style.fontSize, 10),
                computeFontSize = parseFloat(window.getComputedStyle(html).fontSize, 10);
            if (fontSize !== computeFontSize) {
                html.style.fontSize = fontSize * fontSize / computeFontSize+'px';
            }

            if(winW > window.screen.width && resizeNum<=10){
                setTimeout(function(){
                    r(++resizeNum);
                }, 10);
            }
        }
        r(0);

        var isOperate = true,
            rotate = 270,
            totalRotate = 0;

        function change() {
            var scroll = document.querySelector('.scroll'),
                deg = getCurrentRotationFixed();
            //服务结果未返回，走requestanimationframe渲染动画
            if (isOperate) {
                //每次增加角度10°
                scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ (deg+10) +'deg)';
                window.requestAnimationFrame(change);
            } else {
                //设置一个最后想要停留的角度为n*360+rotate，在本次n我取3
                totalRotate = 1080+rotate;
                //设置transition的时间为指定时间，为了保证动画流畅从requestanimationframe过渡到transition
                // 16.7ms = (1/60)*1000,每帧增加10度，所有每增加1度需要16.7ms/10 = 1.67ms
                scroll.style.transitionDuration = totalRotate*(16.7/10)+'ms';
                scroll.style.transitionProperty = 'all';
                scroll.style.transitionTimingFunction = 'cubic-bezier(0.48, 0.48, 0.68, 0.97)';
                scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ totalRotate +'deg)'
            }
        }

        //获取transform rotate角度
        function getCurrentRotationFixed() {
          var el = document.querySelector(".scroll");
          var st = window.getComputedStyle(el, null);
          var tr = st.getPropertyValue("-webkit-transform") ||
               st.getPropertyValue("-moz-transform") ||
               st.getPropertyValue("-ms-transform") ||
               st.getPropertyValue("-o-transform") ||
               st.getPropertyValue("transform") ||
               "fail...";

          if( tr !== "none") {

            var values = tr.split('(')[1];
              values = values.split(')')[0];
              values = values.split(',');
            var a = values[0];
            var b = values[1];
            var c = values[2];
            var d = values[3];

            var scale = Math.sqrt(a*a + b*b);
            var radians = Math.atan2(b, a);
            if ( radians < 0 ) {
              radians += (2 * Math.PI);
            }
            var angle = Math.round( radians * (180/Math.PI));
            
          } else {
            var angle = 0;
          }

          return angle;
        }

        function bindEvent() {
            document.querySelector('.row').addEventListener('click', function(e) {
                var scroll = document.querySelector('.scroll');

                isOperate = true;
                scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ getCurrentRotationFixed() +'deg)';
                scroll.style.transitionDuration = '0ms';
                window.requestAnimationFrame(change);

                //模拟服务端请求，返回中奖结果
                setTimeout(function(e) {
                    //修改标记，动画停止，过度到tansition
                    isOperate = false;
                    //模拟服务返回的中奖结果
                    rotate = Math.random()*360;
                }, 2000)
            })
        }

        document.addEventListener('DOMContentLoaded', function(e) {
            bindEvent();
        })
        
    </script>
</head>
<body>
    <div class="pan">
        <div class="row"></div>
        <div class="scroll">
        </div>
    </div>
</body>
</html>
优质内容筛选与推荐>>
1、迁移博客
2、linux系统开放端口
3、IPTV电视盒系统广告有哪些展现形式
4、CSS 嵌套DIV布局
5、005_针对于go语言中速率限制的思考
0 │ 收藏 │ 举报
朋友将在看一看看到

分享想法到看一看
