頻道欄目
首頁 > 資訊 > HTML/CSS > 正文

前端拋擲方法代碼實現教程

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>
相關TAG標簽
上一篇:php pdo占位符的使用(代碼實例講解)
下一篇:java swing實現五子棋小游戲項目教程
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片