随着触屏手机、平板电脑的普及和占有更多用户和使用时间，触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识，现在何问起就和大家一起学习js的触屏操作，js的触屏touchmove事件，为手指在屏幕上滑动处罚的事件，这里制作了一个简单的示例，可以通过这个示例认识touchmove事件。

效果展示 http://hovertree.com/texiao/mobile/12/

手机或者其他触屏设备扫描二维码体验效果：

本示例弹出的Touch事件请参考：http://hovertree.com/jsdoc/touch.htm

使用三个手指一起滑动的效果图如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>js触屏touchmove手势事件_何问起</title><base target="_blank" />

    <meta charset="utf-8">

    <style>#hovertreechuping{min-width:300px;min-height:300px;background-color:darkgreen;color:white;text-align:center;line-height:50px;}

        .hovertreeinfo {text-align:center;

        }.hovertreeinfo a{color:blue;}

    </style>

</head>

<body>

    <div id="hovertreechuping">何问起提示：请在本区域内触摸滑动手指。请使用手机等触屏设备。可以使用一个手指滑动，也可以使用多跟手指滑动。</div>

    <div class="hovertreeinfo"><a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>

<a href="http://hovertree.com/h/bjaf/0k3j0n95.htm">代码说明</a>

 <br />手机扫描二维码体验效果：<br />

    <img src="http://hovertree.com/hvtimg/bjafjg/2got11dw.png" alt="二维码" />

</div>

    <script type="text/javascript">

        function hovertreeMove(event)

        {

            alert("何问起提示：在元素区内触发了滑动事件。包含" + event.touches.length + "个" + event.touches[0]);

        }

        document.getElementById("hovertreechuping").addEventListener("touchmove", hovertreeMove);

    </script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/0k3j0n95.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

JavaScript触屏滑动API介绍的更多相关文章

  1. Javascript触屏手势库-JTouch(更新V1.1)

    作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascript.jTouch|阅读(857) 7 条评论 Javascript触屏手 ...

  2. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  3. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  4. TouchSlide 触屏滑动特效插件

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...

  5. touch移动触屏滑动事件

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

  6. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

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

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

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

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

  9. JS案例之5——移动端触屏滑动

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

随机推荐

  1. MCDownloadManager ios文件下载管理器

    我们用AFNetworking小试牛刀,写一个简单的下载器来演示功能. 前言 为什么AFNetworking能够成为顶级框架?我们究竟该如何领悟它的精髓所在?这都是很难的问题.安全,高效,流畅,这3个 ...

  2. 高效而稳定的企业级.NET Office 组件Spire（.NET组件介绍之二）

    在项目开发中,尤其是企业的业务系统中,对文档的操作是非常多的,有时几乎给人一种错觉的是”这个系统似乎就是专门操作文档的“.毕竟现在的很多办公中大都是在PC端操作文档等软件,在这些庞大而繁重的业务中,单 ...

  3. Spark读写Hbase的二种方式对比

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 一.传统方式 这种方式就是常用的TableInputFormat和TableOutputForm ...

  4. 浅谈JSP注释

    HTML注释 JSP文件是由HTML尿急和嵌入的Java程序片段组成的,所以在HTML中的注释同样可以在JSP文件中使用.注释格式:<!--注释内容--> <!-- 欢迎提示信息! ...

  5. 安卓GreenDao框架一些进阶用法整理

    大致分为以下几个方面: 一些查询指令整理 使用SQL语句进行特殊查询 检测表字段是否存在 数据库升级 数据库表字段赋初始值 一.查询指令整理 1.链式执行的指令 return mDaoSession. ...

  6. Maven(一)linux下安装

    1.检查是否安装JDK,并且设置了环境变量(JAVA_HOME): echo $JAVA_HOME java -version 运行结果: 显示jdk的安装路径,和java的版本,如: #jdk路径 ...

  7. sqlserver批量修改首字母为大写

    'hello world'  ---->   'Hello world' update tableName set columnName=CHAR(ASCII(SUBSTRING(columnN ...

  8. caffe的python接口学习（7）：绘制loss和accuracy曲线

    使用python接口来运行caffe程序,主要的原因是python非常容易可视化.所以不推荐大家在命令行下面运行python程序.如果非要在命令行下面运行,还不如直接用 c++算了. 推荐使用jupy ...

  9. 【流量劫持】沉默中的狂怒 —— Cookie 大喷发

    精简版:http://www.cnblogs.com/index-html/p/mitm-cookie-crack.html 前言 上一篇文章 讲解了如何借助前端技术,打造一个比 SSLStrip 更 ...

  10. Linux CentOS7通过yum命令安装Mono(尝先安装模式)

    前言 经过尝试网上各种安装mono的技术贴,这个安装过程经历了大约2周,尝试了各个版本,几目前博客所描述的所有安装方式.以下内容的安装方式可以为你尝试不同版本的mono.并非正式环境安装标准方式安装. ...