移动终端的流行，程序员希望通过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. 终结者:具体解释Nginx(一)

            相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...

  2. 左右v$datafile和v$tempfile中间file#

    v$datafile关于存储在文件中的数据视图的信息,v$tempfile查看存储在一个临时文件中的信息. 有两种观点file#现场,首先来看看官方文件的定义: V$DATAFILE This vie ...

  3. MongoDB（两）mongoDB基本介绍

    MongoDB介绍 MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库其中功能最丰富,最像关系数据库的.他支持的数据结构很的松散,是类似json的bjson格式,因此能够存储比 ...

  4. NSIS：设置文件属性的方法

    原文 NSIS:设置文件属性的方法 在NSIS中,有以下方法可以对文件的属性进行设置.   一是通过NSIS的指令SetFileAttributes.   多重属性可用 ' | ' 隔开,有效的属性为 ...

  5. bzoj 2109 &amp; 2535 空中管制 解读

    [] [分析]小猪真的是一个很好的问题.我认为这是一个问题洪水.建立拓扑后(便! ).直接把最外层设定序号为1,第二层为2.bfs下去就可以. . . 结果发现:飞行序号不能同样.. . 于是開始想. ...

  6. java nio的一个严重BUG（转）

    这个BUG会在linux上导致cpu 100%,使得nio server/client不可用,具体的详情可以看这里http://bugs.sun.com/bugdatabase/view_bug.do ...

  7. rman(上)

    CHANGE命令更改备份和副本的状态  1.change backupset 100 unavailable    CATALOG命令是用来备份的碎片和复制信息到RMAN数据库  1.息增加到RMAN ...

  8. android账号与同步之发起同步

    上一篇博文我介绍了账号与同步的同步实现过程,当中提供了一个工系统进程调用的服务,那么这个服务究竟是怎么被启动和使用的呢?这篇博文我就大体梳理一下启动过程. 事实上作为一个一般开发者,我们仅仅要知道要想 ...

  9. 使用PHP顶替JS有趣DOM

    較简单,我须要把一个导航页的数据整理好写入数据库.一个比較直观的方法是对html文件进行分析.通用的方法是用php的正則表達式来匹配.可是这样做开发和维护都非常困难,代码可读性非常差. 导航页的数据都 ...

  10. CSDN下载频道2014年11月4日本-5日常维护公告

    尊敬的用户: CSDN于2005年推出了下载服务.经过数年的发展.下载频道的用户已经为无数用户提供了帮助,分享500万的技术资源. CSDN下载频道将于2014年11月4日23点至11月5日8点进行积 ...