javascript的惯性运动实现代码实例

移动端的惯性运动，最早来自ios的专利。用于手指滑动，离开屏幕之后，屏幕内容继续滚动。更有动态感。

这里，以个人计算机端，鼠标横向（沿x轴)拖拽的，惯性计算。移动端同理

效果

代码如下

！DOCTYPE html html lang=' zh ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title惯性运动/title style type=' text/CSS ' # box {背景：粉色；宽度： 100像素；高度： 100像素；绝对位置：top : 100pxleft : 100px }/style/head body div id=' box '/div/body脚本类型=' text/JavaScript ' var $ box=document。getelementbyid(' box ')；var isDown=false//是否按下鼠标定义变量惯性=1.2;//惯性系数，越大，惯性越不明显，不能小于0 var fv=0//滑动的力度定义变量计时器=null$ box。onmousedown=函数(e){ cleartime out(计时器);//清除定时器Fv=0；这个_ start=e.clientX//鼠标按下的位置isDown=true//鼠标是否有按下，主要防止用户是从容器外开始滑动的} $ box。onmousemove=function(e){ if(IsDown){ var miss=e . Clientx-this ._开始错过这个_ start=e.clientXfv=未命中；} }函数移动小姐(小姐){ $ box。风格。左=错过$ box。offsetleft ' px}窗口。onmouseup=函数(e){ if(IsDown){ IsDown=false；var me=thisvar摩擦=((fv 31) * 2 1) *惯性；//根据力度套用公式计算出惯性大小，公式要记住var num=Math.abs(摩擦力);timer=setInterval(function(){ Fv-=摩擦力；//力度按惯性的大小递减移动小姐(Fv)；if(Math.abs(fv) num){ //如果力度减小到小于一了，结束，或者边界弹回clearInterval(计时器);返回；} },20);} }/脚本/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。