美文网首页
手机滑动屏幕

手机滑动屏幕

作者: 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);

相关文章

  • 手机滑动屏幕

    var startx, starty; //获得角度 function getAngle(angx, an...

  • 检测手机屏幕滑动

    类似于地铁跑酷往上滑起跳

  • 《五种时间》拆书稿开篇

    在这快节奏的时代,很多人的生活都是从清晨醒来滑动手机屏幕开始,从夜晚睡前滑动手机屏幕结束。 每日看似奔波忙碌,却常...

  • 回首2016年的NBA,那些画面让你泪流满面

    滑动手机屏幕,问候从指尖轻轻启程,随同屏幕滑动的还有那美好的旧日时光;回首2016年的NBA,可谓千肠百转、跌宕起...

  • 睡不着的心里话

    摸起手机,放下手机, 屏幕亮了,屏幕暗了, 解锁,再解锁, 左右滑动, 点击,再点击。 打出心里话, 最后全部删掉...

  • iOS-事件的传递和响应机制-原理详解

    前言 当我们在手机屏幕上进行了一次点击,滑动,轻扫手机屏幕,手机如何捕获这个事件并且做出对应的反应,这里就涉及到了...

  • 【AE教程】AE打造手机音乐界面动效

    ​​​这期的讲解手机滑动屏幕的动画,你们脑洞大开一下哈!好了,话不多说,一起来学习吧! 这次教程主要讲解屏幕的滑动...

  • 屏幕滑动

    写这个文章,是记录项目中遇到的一些问题总结。项目需求:APP每二十毫秒有值输出。在屏幕上有两个滑动区域, 根据滑动...

  • 12-24 Android根据手势滑动屏幕

    12-24 Android根据手势滑动屏幕 参考:黑马手机卫士。 http://930307.blog.51cto...

  • ios 事件链 和 响应链 初步理解

    当我们在手机屏幕上进行了一次点击,或者滑动,轻扫手机屏幕,接下来,我们的手机该如何回应我们的指令,软件又经历了哪些...

网友评论

      本文标题:手机滑动屏幕

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