js移动端手指滑动

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("向上!")

                break;

            case 2:

                alert("向下!")

                break;

            case 3:

                alert("向左!")

                break;

            case 4:

                alert("向右!")

                break;

            default:

        }

    }, false);

时间: 2024-08-25 11:49:33

js移动端手指滑动的相关文章

移动端js手指滑动事件初体验

今天在公司遇到做一个移动端手指滑动的效果,刚开始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 下面直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

Slip.js(移动端跟随手指滑动组件,零依赖)

Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库. Html: <!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"

移动端手指操控左右滑动的菜单

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta charset="UTF-8"> <title>移动

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

移动端能用手指滑动的焦点轮播图

要使用到一个库--swipe.js,专门用来制作能够用手指滑动的焦点轮播图的.在网上下载swipe.js包,下载链接:https://codeload.github.com/thebird/Swipe/zip/2.0.0,下载后解压,文件夹名字为:swipe-master. (1)添加视口约束: (2)引入js包 (3)注意事项: // 布局, 在body标签里面,添加一个父盒子,这个父盒子可以任意取id(eg:<div id="jiaodiantu">).里面必须内嵌一个

用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js事件: 1.touchstart---手指开始触摸事件,此事件可以获取起始坐标,将起始坐标保存在pressX 和pressY 中. 2.touchmove---手机触摸移动时间,只要手机不离开指定元素,就不停的将手机的新坐标通过事件发给页面上的js代码.通过计算此事件获取的当前坐标与起始坐标的差,就

《移动端浏览器Touch事件判断手指滑动方向方法》

1 $("body").on("touchstart", function(e) { 2     e.preventDefault(); 3     startX = e.originalEvent.changedTouches[0].pageX, 4     startY = e.originalEvent.changedTouches[0].pageY; 5 }); 6 $("body").on("touchmove",

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加