昨晚閑來(lái)無(wú)事快压，寫的滑動(dòng)慣性，js水平一般历造，求各位大神指點(diǎn)
<style>
html,body{
padding: 0;
margin: 0;
}
.box{
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
html：
<div class="box"></div>
<script>
var box = $('.box');
var t = null;
var clientX = 0,
left = box.offsetLeft,
chuX = 0,
clientY = 0,
tops = box.offsetTop,
chuY = 0,
time1 = 0,
box.ontouchstart=function(e){
var juLi = e.changedTouches[0];
clientX = juLi.clientX;
clientY = juLi.clientY;
chuX = clientX;
chuY = clientY;
time1 = e.timeStamp;
box.ontouchmove=function(e){
var juLi = e.changedTouches[0];
left = juLi.clientX - clientX + left;
tops = juLi.clientY - clientY + tops;
clientX = juLi.clientX;
clientY = juLi.clientY;
box.style.left = left + 'px';
box.style.top = tops + 'px';
}
document.ontouchend=function(e){
var juLi = e.changedTouches[0];
var speedX = juLi.clientX - chuX;
var speedY = juLi.clientY - chuY;
var time = e.timeStamp - time1;//時(shí)間差
//取消touchmove和touchend事件
box.onontouchmove = null;
document.ontouchend = null;
move(box,speedX,speedY,time)
}
}
//慣性函數(shù)
function move(obj,speedX,speedY,time){
clearInterval(t);
//計(jì)算x,y的移動(dòng)速度
speedX = speedX30/time;
speedY = speedY30/time;
t = setInterval(function(){
speedX *= 0.95 //摩擦
speedY *= 0.95 //摩擦
var x = left+speedX;
var y = tops+speedY;
if(x <= 0){
x=0;
}
if(x >= width){
x = width
}
if(y <=0){
y = 0;
}
if(y >= height){
y = height
}
obj.style.left = x +'px';
obj.style.top = y +'px';
left = left+speedX;
tops = tops+speedY;
if(Math.abs(speedX) < 1 && Math.abs(speedY) < 1){
speedX = 0;
speedY = 0;
}
// if(Math.abs(speedY) < 1){
// speedY = 0
// };
if((speedX == 0 && speedY == 0) || (y == height && x == width)){
clearInterval(t);
}
},30);
}
function $(obj){
return document.querySelector(obj)
}
</script>
