美文网首页
手机滑动屏幕

手机滑动屏幕

作者: yiqian091 | 来源:发表于2018-04-23 19:01 被阅读0次

    var startx, starty;

        //获得角度

        function getAngle(angx, angy) {

            return Math.atan2(angy, angx) * 180 / Math.PI;

        };

        根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动

        function getDirection(startx, starty, endx, endy) {

            var angx = endx - startx;

            var angy = endy - starty;

            var result = 0;

            //如果滑动距离太短

            if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {

                return result;

            }

            var angle = getAngle(angx, angy);

            if (angle >= -135 && angle <= -45) {

                result = 1;

            } else if (angle > 45 && angle < 135) {

                result = 2;

            } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

                result = 3;

            } else if (angle >= -45 && angle <= 45) {

                result = 4;

            }

            return result;

        }

        手指接触屏幕

        document.addEventListener("touchstart", function (e) {

            startx = e.touches[0].pageX;

            starty = e.touches[0].pageY;

        }, false);

        手指离开屏幕

        document.addEventListener("touchend", function (e) {

            var endx, endy;

            endx = e.changedTouches[0].pageX;

            endy = e.changedTouches[0].pageY;

            var direction = getDirection(startx, starty, endx, endy);

            switch (direction) {

                case 0:

                    // alert("未滑动!");

                    break;

                case 1:

                    // alert("向上!")

                    downLoad();

                    break;

                case 2:

                    // alert("向下!")

                    upLoad();

                    break;

                case 3:

                    // alert("向左!");

                    // downLoad();

                    break;

                case 4:

                    // alert("向右!")

                    // upLoad();

                    break;

                default:

            }

        }, false);

    相关文章

      网友评论

          本文标题:手机滑动屏幕

          本文链接:https://www.haomeiwen.com/subject/crollftx.html