前端抛掷方法代码实现教程

17-12-20 来源：[db:作者]
收藏我要投稿
前端抛掷方法代码实现教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 50px;
            background-color: #eee;
            overflow: hidden;
        }
        div ul{
            list-style: none;
            width: 2000px;
            height: 50px;
        }
        div ul li{
            float: left;
            margin-right: 10px;
            line-height:50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="nav">
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
            <li>栏目</li>
            <li>栏目●</li>
        </ul>
    </div>

    <script type="text/javascript">
        var box = document.querySelector("#box");
        var nav = document.querySelector("#nav");

        var lastpoint,lastTowPointDistance;
        var startX,dX;
        var timer;
        //信号量
        var x = 0;
        //触摸开始
        box.addEventListener("touchstart",function(event){
            //阻止默认事件
            event.preventDefault();
            //得到手指
            var finger = event.touches[0];
            //手指触摸开始的位置
            startX = finger.clientX;
            //停表
            clearInterval(timer);
        },true);


        //触摸移动
        box.addEventListener("touchmove", function(event){
            //阻止默认事件
            event.preventDefault();
            //得到手指
            var finger = event.touches[0];
            //这一次和上一次的坐标差
            lastTowPointDistance = finger.clientX - lastpoint;
            lastpoint = finger.clientX;
            //差值
            dX = finger.clientX - startX;
            //运动
            nav.style.transform = "translate(" + (x + dX) + "px,0px)";
        }, true);

        //结束触摸
        box.addEventListener("touchend", function(event){
            //阻止默认事件
            event.preventDefault();

            var zongzhenshu = 50;

            //信号量改变
            x += dX;
            //帧编号
            var zhenbianhao = 0;
            clearInterval(timer);
            timer = setInterval(function(){
                //定时器帮我们继续运动一些帧
                zhenbianhao++;
                if(zhenbianhao > zongzhenshu){
                    clearInterval(timer);
                    //验收x是不是负数，x不能是正数
                    if(x > 0){
                        x = 0;
                        nav.style.transition = "all 0.2s ease 0s";
                        nav.style.transform = "translate(0px,0px)";
                    }
                }
                //改变信号量
                x += calcChange(zhenbianhao,zongzhenshu,lastTowPointDistance);

                //运动
                nav.style.transform = "translate(" + x + "px,0px)";
            },20);

            //计算这一帧的变化量
            function calcChange(zhenbianhao,zongzhenshu,start){
                return (start / (zongzhenshu * zongzhenshu)) * (zhenbianhao - zongzhenshu) * (zhenbianhao - zongzhenshu);
            }
        }, true);
    </script>
</body>
</html>
点击复制链接与好友分享!回本站首页