抛掷方法

来源：互联网发布：在哪看java的api文档编辑：程序博客网时间：2024/06/09 20:45
<!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