因为要做一个手机端的滚动插件，所以想模拟出手机原生的惯性滚动，就是手指快速滑动后，手机页面在手指抬起来之后，依然会滚动一段距离的效果。
现在我尝试了两种方法
1、在手指start与end之间时间少于300ms时，根据手指移动距离得出需要继续滚动的长度，在end之后通过transition与top实现动画效果
2、在手指end之后通过手指的移动距离与使用时间计算平局速度，如果使用时间少于300ms，则通过requestAnimationFrame循环调用一个每次都递减速度的函数，当速度很小时跳出函数循环。在函数中每一次都设置一次top值，因为requestAnimationFrame间隔很短，大概之后16ms左右，以实现效果
主要思路是：鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。下面是简单的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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）