老师看看我备注的内容,是否是这样理解

老师看看我备注的内容,是否是这样理解

<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>

http://img1.sycdn.imooc.com//climg/5daec59e0812b22507000720.jpg


问题:
1.我的备注的理解是不是正确的
2.如果第一次按curPoint.x为0的情况来说,diffPoint.x跟curPoint.x其实是相等的,都是当前位置-初始位置,第二次移动因为curPoint.x改变了,所以才不一样?
3.curPoint.x += touch.pageX - startPoint.x;  这里其实确实不太好理解,弯有点绕不过来

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-10-22 17:28:36

同学你好,

1、备注理解的没有问题,很棒哦!

2、因为开始curPoint当前位置设置(0,0)的原因,所以导致第一次移动过后diffPoint.x跟curPoint.x值一样。第二次再移动的时候就不一样了哦。

3、curPoint.x += touch.pageX - startPoint.x; 其实很好理解:touch.pageX - startPoint.x就是移动的差值,那么元素当前的位置也就是移动前的位置+差值哦。

祝学习愉快!欢迎采纳~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师