开发者学堂课程【移动 Web 前端开发：js 功能-吸附效果】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8422
js功能-吸附效果
基本内容
一、提出吸附过程中的问题
二、吸附效果的代码
一、提出吸附过程中的问题
通过 move 过程中坐标轴的改变，和之前的定位做个相加，便可以得出将要去做定位的位置。
当滑动到这一步的时候，下一步该怎么办？它可以直接回到原来的位置。
滑动到这个程度是应该弹跳到下一个图片还是应该吸附回去？答：滑动到三分之一以内时吸附，滑动到三分之一以外时切换。
二、吸附效果的代码
var startX = 0 ; 此时在记录开始的X坐标。
var distanceX = 0 ；记录坐标轴改变的。
此时所记录的全局变量,在下一次滑动的时候也有可能会存在，如果滑动一下，或许会启动 move 事件；若是点击一下图片，不会触发 move 事件；严谨判断
var is Move = false；
imageBox.addEventListener(‘touchstart' , function(e){
});
clearInterval（timer ）
startX = e.touches[ 0 ].clientX;
console.log(startX);
imageBox.addEventListener(‘touchmove' , function(e) {
var moveX = e.touches[ 0 ].clientX ;
distanceX = moveX – startX ；
distanceX 大于 0 的时候，向右滑动。
distanceX 小于 0 的时候，向左滑动。
/*滑动*/
/*基于当前的位置*/
/*计算将要去做定位*/
var translateX = - index*width + distancex;
/*清除过渡*/
removeTransition();
/*做定位*/
setTranslateX(translateX);
isMove = ture；
});
imageBox . addEventL istener( ' touchend' , function(e){
/*滑动事件结束之后来判断当前滑动的距离*/
/*有一个范围 如果大于三分之一 切换图片反之吸附回去定位回去
在滑动结束之后，在 end 事件时
console.log(distanceX);
if （isMove) { 如果移动了且移动的距离小于三分之一,这里排除了一种情况,在点击的时候不会发生 move.
if (Math.abs(distanceX) < width /3 {
* 4.当滑动距离不够的时候 吸附回去 (过渡 位移)
/*过渡*/
addTransition();
/*位移*/
setTranslateX(-index*width);
} else {
* 5.当滑动距离够了的时候 跳转上一张 下- -张 (判断方向 过渡 位移) * */
}
}
