拖动惯性
惯性原理:
产生的速度 = 移动距离 / 移动时间
距离 = 松开的坐标 - 上次的坐标 (距离差)
时间 = 松开的时间 - 按下的时间 (时间差)
//拖动
var slide = document.querySelector('.header .h-nav'),
nav = document.querySelector('.header .nav'),
// 开始的偏移
startX = 0,
// 保存的偏移
translateX = 0,
// 手指坐标
startFinger = 0,
maxWidth = nav.offsetWidth - slide.offsetWidth,
lastTime = 0; //按下的时间
console.log(maxWidth);
slide.addEventListener('touchstart',function (e) {
e.stopPropagation();
startFinger = e.changedTouches[0].clientX;
nav.style.WebkitTransition = nav.style.transition = '';
startX = translateX;
lastTime = Date.now();
console.log(lastTime);
});
slide.addEventListener('touchmove',function (e) {
e.stopPropagation();
var nowFinger = e.changedTouches[0].clientX,
distance = nowFinger - startFinger;
translateX = distance + startX;
// 弹性
if(translateX > 0 ){ //拖动系数. 拉力的感觉
translateX *= 0.4;
}else if( translateX < -maxWidth){ //最后.
translateX = distance*0.4 + startX;
}
shift(translateX);
})
slide.addEventListener('touchend',function (e) {
/*
惯性原理:
产生的速度 = 移动距离 / 移动时间
距离 = 松开的坐标 - 上次的坐标 (距离差)
时间 = 松开的时间 - 按下的时间 (时间差)
*/
var nowFinger = e.changedTouches[0].clientX,
distance = nowFinger - startFinger, //距离差
timeDis = Date.now() - lastTime, //时间差
speed = (distance / timeDis)*100;
console.log(speed); //很小 *倍数
// 惯性
translateX += speed;
// 边界 ,弹回去
if(translateX > 0){
translateX = 0;
}else if(translateX < -maxWidth){
translateX = -maxWidth;
}
// 添加贝塞尔曲线
nav.style.WebkitTransition = nav.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
shift(translateX);
})
function shift(value){
nav.style.WebkitTransform = nav.style.transform = 'translateX('+value+'px)';
}