移动终端的流行，程序员希望通过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. 应用spss可靠性分析软件

    问卷调查的可靠性分析 一.概念:     信度是指依据測验工具所得到的结果的一致性或稳定性,反映被測特征真实程度的指标. 一般而言,两次或两个測验的结果愈是一致.则误差愈小,所得的信度愈高,它具有下面 ...

  2. Web在线视频方案浅谈

    写在前面 最近因为项目预研,花时间和精力了解并总结了现如今web在线视频的一些解决方案,由于资历薄浅,措辞或是表述难免出现遗漏,还望各位海涵,有好的建议或方案还望赐教,定细心学习品位. 如今的web技 ...

  3. hdu 1150 Machine Schedule (经典二分匹配)

    //A组n人 B组m人 //最多有多少人匹配 每人仅仅有匹配一次 # include<stdio.h> # include<string.h> # include<alg ...

  4. Hadoop Streaming 得到mapreduce_map_input_file中遇到的问题的版本号

    1.Hadoop Streaming,您可以在任务获得hadoop设置环境变量, 例如,使用awk书面map从而能获得:filename = ENVIRON["mapreduce_map_i ...

  5. ElasticSearch实战

    ElasticSearch实战-入门 1.概述 今天接着<ElasticSearch实战-日志监控平台>一文来给大家分享后续的学习,在<ElasticSearch实战-日志监控平台& ...

  6. Git常用命令(转)

    目前开发的新项目使用的版本控制工具基本用的都是Git,老项目用的还是Svn,网上Git资源也很多,多而杂.我整理了一份关于Git的学习资料,希望能帮助到正在学习Git的同学. 一. Git 命令初识 ...

  7. quick-cocos2d-x游戏开发【6】——制作您自己的自定义效果button菜单

    前面提到的主菜单使用,还是很easy的,但我们在商业产品.经常看到button他们人很好,照片不仅就好了,和动画也很不错.Candy Crash都玩过吧,他们看到,button.真的像果冻,效果确实非 ...

  8. Python challenge 3 - urllib &amp; re

    第三个主题地址:http://www.pythonchallenge.com/pc/def/ocr.html Hint1:recognize the characters. maybe they ar ...

  9. Linux/Unix

    Linux/Unix 新手和专家教程 你正在找一些高质量的Linux 和 UNIX 的教程吗?如果是,这篇文章会告诉你到哪去找到这些教程.这里我们将给出超过30个相当的不错的 Linux 和 UNIX ...

  10. Scriptcase演示程序，现在，他们使用SC多么简单的开发系统

    Scriptcase它内置了一批成熟的业务系统,我们的系统的一部分已经完成和功能微调,在互联网上.检查每个人Scriptcase如何简单可以加速的功能模块的发展. 访问 http://www.phps ...