移动端拖动惯性

拖动惯性

            惯性原理:            产生的速度 = 移动距离 / 移动时间            距离 = 松开的坐标 - 上次的坐标  (距离差)            时间 = 松开的时间 - 按下的时间  (时间差)

---

//拖动

    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)';    }

---