老师看看我备注的内容,是否是这样理解
<script>
var backtop = document.getElementById('backtop');
drag(backtop, { //创建一个开关,是否允许X,Y轴移动
x: true,
y: true
// y: true
});
function drag(el, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true; //判断传值的类型是不是undefined,是就等于值本身,不是就等于true
options.y = typeof options.y !== 'undefined' ? options.y : false; //判断传值的类型是不是undefined,是就等于值本身,不是就等于false
if (!options.x && !options.y) return; //X,Y要是都是false,直接返回
var curPoint = { //创建一个值,用来存放移动后的位置,开始为0
x: 0,
y: 0
};
var startPoint = {}; //存放初始位置
var isTouchMove = false; //判定点击还是拖动,再触发事件
el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
el.addEventListener('touchend', handleEnd, false);
function handleStart(ev) {
var touch = ev.changedTouches[0];
startPoint.x = touch.pageX; //点击时,坐标点的位置存起来
startPoint.y = touch.pageY;
}
function handleMove(ev) {
ev.preventDefault(); //取消滚动条的默认事件
isTouchMove = true; //是拖动,触发事件
var touch = ev.changedTouches[0];
var diffPoint = {}; //差值存放
var movePoint = { //移动距离存放
x: 0,
y: 0
};
diffPoint.x = touch.pageX - startPoint.x; //差值=当前移动位置-初始位置
diffPoint.y = touch.pageY - startPoint.y; //50=150-100
if (options.x) {
movePoint.x = diffPoint.x + curPoint.x; //移动距离=差值+最后的位置
} //50=50+0
if (options.y) {
movePoint.y = diffPoint.y + curPoint.y;
}
move(el, movePoint.x, movePoint.y); //把移动距离传到函数move里面,进行位移
}
function handleEnd(ev) {
if (!isTouchMove) return; //不是拖动,返回
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - startPoint.x; //移动后的位置=当前的位置-开始位置+移动后的位置,保证每次都是拖动后的位置
curPoint.y += touch.pageY - startPoint.y;
isTouchMove = false;
}
function move(el, x, y) {
x = x || 0;
y = y || 0;
el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
}
}
</script>
问题:
1.我的备注的理解是不是正确的
2.如果第一次按curPoint.x为0的情况来说,diffPoint.x跟curPoint.x其实是相等的,都是当前位置-初始位置,第二次移动因为curPoint.x改变了,所以才不一样?
3.curPoint.x += touch.pageX - startPoint.x; 这里其实确实不太好理解,弯有点绕不过来
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星