移动端环形拖拽

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>11111</title>
    <style>
        *{margin:0;padding:0;list-style:none;}
        body{ background:#000;}
        #ul1{ position:absolute;left:50%;top:60%; margin-left:-66px; margin-top:-50px;width:50px; height:50px;
            transform:perspective(20000px) rotateX(30deg) rotateY(0deg) ; transform-style:preserve-3d;}
        #ul1 li{position:absolute;left:0;top:0;width:100%; height:100%; background: red;
            transform:rotateY(0deg)  translateZ(0px);
            transition:1s all ease;
            border-radius:10px;
            box-shadow:0 0 5px 2px #fff;
            overflow:hidden;
            font-size: 48px;
        }
    </style>
    <script>
        window.onload = function(){

            var oUl = document.getElementById("ul1");
            var aLi = oUl.children;
            var len = aLi.length;
            var speedX = 0;
            var speedY = 0;
            var lastX = 0;
            var lastY = 0;
            var i = len - 1;
            alert(i);
            var timer = setInterval(function(){
                aLi[i].style.transform = "rotateY("+360/len*i+"deg)  translateZ(300px)";
                i--;
                if(i < 0){
                    clearInterval(timer);
                }
            },0);

            var bLeft = bRight = bTop = bBottom = false;
            var x = 0;//上下 rotateX
            var y = 0;//左右 rotateY
            oUl.addEventListener('touchstart',function(ev){
                /* ev.preventDefault();*/
                var disX = ev.touches[0].clientX - y;
                var disY = ev.touches[0].clientY - x;
                document.addEventListener("touchmove",defaultEvent,false);
                document.addEventListener('touchmove',function(ev){
                    /*   alert('111');*/
                    y = ev.touches[0].clientX - disX;
                    x = ev.touches[0].clientY - disY;
                    if(x >20000){// 60
                        x = 20000;
                    } else if(x < -20000) {// -60
                        x = -20000;
                    }
                    oUl.style.transform = "perspective(20000px)  rotateX(30deg)  rotateY("+y/10+"deg)";
                    speedX = x - lastX;
                    speedY = y - lastY;
                    lastX = x;
                    lastY = y;
                },false)

                window.addEventListener('touchend',function(){
                    document.removeEventListener("touchmove",defaultEvent,false);
                    document.removeEventListener("touchend",defaultEvent,false);
                    clearInterval(timer);

                },false);
                return false;
            });

            function defaultEvent(ev) {
                ev.preventDefault();
            }
        };
    </script>
</head>

<body>
<ul id="ul1">
    <li><a style="display: block;" href="http://www.baidu.com">aaa</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">bbb</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">ccc</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">ddd</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">eeee</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">ff</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">ggg</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">hh</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">ii</a></li>
    <li><a style="display: block;" href="http://www.baidu.com">jjj</a></li>

</ul>
</body>
</html>
猜你喜欢
