抛掷方法

最新推荐文章于 2021-09-16 09:02:13 发布

小薇安

最新推荐文章于 2021-09-16 09:02:13 发布

阅读量260

点赞数

分类专栏： javascript 文章标签：移动抛掷方法

本文链接：https://blog.csdn.net/wyx15011474269/article/details/78848732

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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>

小薇安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抛掷方法

<!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">
复制链接

扫一扫