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

    NET MVC 1.为 Action 标注 Attribute 限制访问 public class HomeController : Controller { [HttpPost] public Ac ...

  2. hdu 4407 Sum 容斥+当前离线

    乞讨X-Y之间p素数,,典型的纳入和排除问题,列的求和运算总和的数,注意,第一项是最后一个项目数. 如果不改变到第一记录的答案,脱机处理,能保存查询,候,遇到一个操作1,就遍历前面的操作.把改动加上去 ...

  3. Android开发之异步具体解释（二）之AsyncTask

    请尊重他人的劳动成果,转载请注明出处:Android开发之异步具体解释(二)之AsyncTask http://blog.csdn.net/fengyuzhengfan/article/details ...

  4. springMVC+angular+bootstrap+mysql的简易购物网站搭建

    springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(a ...

  5. Git合并多个Commit

    当前有四个commit,现在要将四个commit合并为一个,可以使用git rebase -i HEAD~{这里是要合并的commit数量} 如 git rebase -i HEAD~4 ,即为合并最 ...

  6. 第20章 状态模式（State Pattern）

    原文 第20章 状态模式(State Pattern) 状态模式  概述:   当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态的条件表 ...

  7. C语言移位运算符

    位移位运算符是将数据看成二进制数,对其进行向左或向右移动若干位的运算.位移位运算符分为左移和右移两种,均为双目运算符.第一运算对象是移位对象,第二个运算对象是所移的二进制位数. 位移位运算符的运算对象 ...

  8. C# 跨线程呼叫控制

    在C# 应用程序开发, 我们经常要UI作线程分开,防止界面停止响应.  同一时候我们又须要在工作线程中更新UI界面上的控件, 以下介绍几种经常使用的方法 阅读文件夹 线程间操作无效 第一种办法:禁止编 ...

  9. 从头开始学JavaScript (七)——函数

    原文:从头开始学JavaScript (七)--函数 一.return 函数在执行完return之后停止并立即退出. return返回值:与return: 如下两个例子: function sum(n ...

  10. Swift构造函数（Initializer）和析构函数（Deinitializer）

    要初始化结构和类和其他类型的实例的属性. 默认的构造函数 struct Fahrenheit { var temperature: Doubleinit(){ temperature = 32.0 } ...