js如何实现惯性滑动效果

js如何实现惯性滑动效果,第1张

主要思路是:鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。

下面是简单的js代码实现:仅供参考:

<style>    

#div1{ width:100px height:100px background:red position:absolute left:0px top:0}    

</style>    

<script>    

window.onload=function(){    

var oDiv=document.getElementById('div1')    

var iSpeedX=0    

var iSpeedY=0     

var lastX=0    

var lastY=0    

var timer=null     

oDiv.onmousedown=function(ev){    //div的鼠标按下事件,主要计算鼠标当前位置,和移动位置。这样可以计算出鼠标移动速度。

var oEvent=ev || event    

var disX=oEvent.clientX-oDiv.offsetLeft    

var disY=oEvent.clientY-oDiv.offsetTop      

clearInterval(timer)      

document.onmousemove=function(ev){   //鼠标拖动事件。 

var oEvent=ev || event     

oDiv.style.left=oEvent.clientX-disX+'px'    

oDiv.style.top=oEvent.clientY-disY+'px'    

iSpeedX=oEvent.clientX-lastX    

iSpeedY=oEvent.clientY-lastY     

lastX=oEvent.clientX    

lastY=oEvent.clientY

}    

document.onmouseup=function(){    //当鼠标抬起后,清掉移动事件。

document.onmousemove=null    

document.onmouseup=null

oDiv.releaseCapture && oDiv.releaseCapture()      

startMove()    

}    

oDiv.setCapture && oDiv.setCapture()    

return false

}         

function startMove(){    //移动函数,主要 *** 作是计算鼠标移动速度和移动方向。

clearInterval(timer)    

timer=setInterval(function(){    

iSpeedY+=3    

var t=oDiv.offsetTop+iSpeedY    

var l=oDiv.offsetLeft+iSpeedX    

if(t>document.documentElement.clientHeight-oDiv.offsetHeight){    

t=document.documentElement.clientHeight-oDiv.offsetHeight    

iSpeedY*=-0.8    

iSpeedX*=0.8

}     

if(t<0){    

t=0    

iSpeedY*=-0.8    

iSpeedX*=0.8

}    

if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    

l=document.documentElement.clientWidth-oDiv.offsetWidth

    

iSpeedX*=-0.8    

iSpeedY*=0.8    

}    

if(l<0){    

l=0    

iSpeedX*=-0.8    

iSpeedY*=0.8

    

}    

    

oDiv.style.left=l+'px'    

oDiv.style.top=t+'px'    

    

if(Math.abs(iSpeedX)<1)iSpeedX=0    

if(Math.abs(iSpeedY)<1)iSpeedY=0    

if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){    

clearInterval(timer)    

}    

document.title=i++    

},30)

}    

}    

</script>    

</head>    

<body>    

<div id="div1"></div>    

</body>

1、ios10确实不能滑动解锁,苹果取消了通过滑动解锁的这个功能。2、建议可以开启抬腕唤醒功能,这样只要手指轻轻放在Home键上,不需要按下也能解锁。3、具体设置方法为在【设置】中,找到【显示与亮度】点击打开。4、找到【抬腕唤醒】选项,滑动开启该功能。

第一种方式: 原理:利用结束的位置来重新设置ScrollView ContentOffset的值,让人产生视觉上的无限循环,优点:代码易懂,缺点,会创建多余的内存。 第二种方式: 原理:利用中间的两个变量来当前的View及缓冲的View,只创建两个View,将当前的View放在中间。判断滑动的位置,优先去缓冲的View找,然后结束滑动在更新当前View的image 第三种方式(这里就不讲解了)


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11457929.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存