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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>触屏手指滑动计算演示--程序员老刘</title>

</head>

<body style="font-size:32px;">

<div style="width:100%">

<h2>触屏手指滑动方向计算演示</h2>

<div id="region" style="background-color:yellow;width:100%;height:50%"></div>

起始坐标<br/>

<input id="touchStart" style="font-size: 48px;"/><br/>

结果计算<br/>

<input id="touchMove" style="font-size: 48px;"/>

</div>

<script type="text/javascript">

/*

 * 作者：程序员老刘

 * 功能：计算手指在指定标签上的滑动的方向

 */

    var tagId = "region";

    var pressX = 0, pressY = 0;

    var obj = document.getElementById(tagId);

    obj.addEventListener('touchmove', function(event) {

        // 如果这个元素的位置内只有一个手指的话

        if (event.targetTouches.length == 1) {

            var touch = event.targetTouches[0];

            var spanX = touch.pageX - pressX;

            var spanY = touch.pageY - pressY;

            var direct = "none";

            if (Math.abs(spanX) > Math.abs(spanY)) {

                //水平方向

                if (spanX > 0) {

                    direct = "right";//向右

                    //do right function

                } else {

                    direct = "left";//向左

                    //do left function

                }

            } else {

                //垂直方向

                if (spanY > 0) {

                    direct = "down";//向下

                    //do down function

                } else {

                    direct = "up";//向上

                    //do up function

                }

            }

            // 把元素放在手指所在的位置

            touchMove.value = direct + "(" + spanX + ';' + spanY + ")";

        }

    }, false);

    obj.addEventListener('touchstart', function(event) {

        // 如果这个元素的位置内只有一个手指的话

        if (event.targetTouches.length == 1) {

            var touch = event.targetTouches[0];

            // 把元素放在手指所在的位置

            pressX = touch.pageX;

            pressY = touch.pageY;

            touchStart.value = pressX + ';' + pressY;

        }

    }, false);

    /*

    obj.addEventListener('touchend', function(event) {

        // 如果这个元素的位置内只有一个手指的话

        if (event.targetTouches.length == 1) {

            var touch = event.targetTouches[0];

            // 把元素放在手指所在的位置

            touchEnd.value=touch.pageX + ';' + touch.pageY;

        }

    }, false);

     */

</script>

</body>

</html>

用HTML和javascript(JS)计算触屏手机手指滑动方向的演示的更多相关文章

  1. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  2. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

  3. 触屏手机3G网站设计

    随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行 ...

  4. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

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

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  7. javascript移动设备触屏事件

    ontouchstartontouchmoveontouchendontouchcancel 目前移动端浏览器均支持这4个触摸事件: /** * onTouchEvent */ var div = d ...

  8. JavaScript(JS)计算某年某月的天数（月末）

    方法1 /** * 获取某年月的天数 * @param year 年 * @param month 月(0-11) * @returns {number} 天数 */ var getDaysOfMon ...

  9. 引用fastclick.js或使用触屏监听 滑动屏幕报错：解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

随机推荐

  1. （大数据工程师学习路径）第一步 Linux 基础入门----用户及文件权限管理

    用户及文件权限管理 实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...

  2. Javascipt数组去重的几种方式

    方法一 function unique(arr) { var retArr = []; for (var i = 0; i < arr.length; i++) { (retArr.indexO ...

  3. 问题（bug）确实不在代码逻辑上面，往往是配置、权限或者业务逻辑之外的地方(转)

    不能说所有的bug都是纸老虎,但往往那种看似很奇葩的bug,导致的原因确实很简单,烦了你一段时间,找到真相又让你忍不住一笑.什么是奇葩的bug呢.我的定义是:代码逻辑都一样,但在A处是好的,到了B处就 ...

  4. poj 2804 字典 （特里 要么 快排+二分法）

    2804:词典 总时间限制:  3000ms  内存限制:  65536kB 描写叙述 你旅游到了一个国外的城市.那里的人们说的外国语言你不能理解.只是幸运的是,你有一本词典能够帮助你. 输入 首先输 ...

  5. 笔试题&amp;面试题：设计一个复杂度为n的算法找到单向链表倒数第m个元素

    设计一个复杂度为n的算法找到单向链表倒数第m个元素.最后一个元素假定是倒数第0个. 提示:双指针查找 相对于双向链表来说,单向链表仅仅能从头到尾依次訪问链表的各个节点,所以假设要找链表的倒数第m个元素 ...

  6. 十天学Linux内核之第八天---构建Linux内核

    原文:十天学Linux内核之第八天---构建Linux内核 今天是腊八节,说好的女票要给我做的腊八粥就这样泡汤了,好伤心,好心酸呀,看来代码写久了真的是惹人烦滴,所以告诫各位技术男敲醒警钟,不要想我看 ...

  7. 使用C#或javascript将Table里的数据导出到Excel

    原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...

  8. 【Flume NG用户指南】（2）构造

    作者:周邦涛(Timen) Email:zhoubangtao@gmail.com 转载请注明出处:  http://blog.csdn.net/zhoubangtao/article/details ...

  9. 【Cocos得知】技术要点通常的积累

    1.粒子特效 CCParticleSystem*sp = CCParticleSnow::create(); sp->setTexture(CCTextureCache::sharedTextu ...

  10. linux_ubuntu 16.04 更新wifi驱动_无法链接wifi问题

    ubuntu kylin ubuntu kylin ubuntu kylin wifi 这个很好解决的,16.04 默认 没有使用wifi驱动设备,默认选择的是:不使用设备1.进入到,软件和更新 -- ...