移动终端的流行，程序员希望通过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. 熟人UML

    UML,全名Unified Modeling Language.模语言.它是软件和系统开发的标准建模语言.主要是以图形的方式对系统进行分析.设计. 同一时候,UML不是一个程序设计语言,也不是一个形式 ...

  2. ABP

    ABP ABP之Javascript生成 2015-08-02 18:49 by Barlow Du, 319 阅读, 收藏, 编辑 还是服务在调试SimpleTaskSystem的AngularJs ...

  3. PAT 1033. To Fill or Not to Fill (贪婪)

    PAT-A最后一个问题.最后做出来... 贪婪,通过局部优化全局优化. 1. 该加油站按距离升序排列 2. 记录气体台当前所在index,目前的汽油.开支.在您的整个背部 3. 遍历中有两种情况: 1 ...

  4. （大数据工程师学习路径）第四步 SQL基础课程----select详解

    准备 在正式开始本内容之前,需要先从github下载相关代码,搭建好一个名为mysql_shiyan的数据库(有三张表:department,employee,project),并向其中插入数据. 具 ...

  5. IBM Java架构师的技能

    一天,群里飘过一个IBM招聘信息.我看过之后,也只是如此而已. 大家好!我是XXX,IBM招聘java架构师,如今还有38个名额 学历大专以上即可,英语能面试交流的.项目有非常多到时候依据您面试会详谈 ...

  6. 查询oracle sql运行计划，一个非常重要的观点--dba_hist_sql_plan

    该文章的作者给予了极大的帮助长老枯荣,为了表达我的谢意. 这适用于oracle db版本号oracle 10g或者更高的版本号. 之所以说这种看法是非常重要的,因为观点是有之一awrsqrpt报告没有 ...

  7. 背包问题 (DP)

    利用记忆化数组.记dp[i][j]为根据rec的定义,从第i个物品开始挑选总重小于j时,总价值的最大值. 递推式: dp[i][j]=0     (j<w[i]) dp[i][j] dp[i][ ...

  8. Composer常见问题

    Composer常见问题 原文链接:Composer常见问题 安装了Composer后,运行composer --version,查看Composer的版本号.如果出现下面的提示,那么软件安装成功. ...

  9. 一位OWin服务器新成员TinyFox

    一位OWin服务器新成员TinyFox TinyFox 是一款支持OWIN标准的WEB应用的高性能的HTTP服务器,是Jexus Web Server的"姊妹篇".TinyFox本 ...

  10. Canvas旋转图片--保持相同大小的算法

     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...