随着触屏手机、平板电脑的普及和占有更多用户和使用时间，触屏的触碰、滑动等事件也成为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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS9odnRpbWcvYmphZmpnLzJnb3QxMWR3LnBuZw==.jpg" 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介绍的更多相关文章
-
Javascript触屏手势库-JTouch(更新V1.1)
作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascript.jTouch|阅读(857) 7 条评论 Javascript触屏手 ...
-
TouchSlide触屏滑动特效插件的使用
官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...
-
自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
-
TouchSlide 触屏滑动特效插件
TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...
-
touch移动触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
-
朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现
翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...
-
JS移动客户端--触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
-
JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
-
JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
随机推荐
-
使用XmlHelper添加节点C#代码
接着上一篇:http://keleyi.com/a/bjac/ttssua0f.htm在前篇文章中,给出了C# XML文件操作类XmlHelper的代码,以及使用该类的一个例子,即使用XmlHelpe ...
-
WebClient 使用
--post 请求 public static string PostMsg(Guid orgid, int page, int rows) { System.N ...
-
impdp的一些实际问题解决方法
之前在http://blog.csdn.net/bisal/article/details/19067515写过一篇关于expdp和impdp的实践的帖子.今天碰到个问题,有些内容没有介绍全,这里再补 ...
-
HTML5 DOM扩展
一.选择符 1. querySelector()方法:返回与该模式匹配的第一个元素 //取得body元素 var body = document.querySelector("body&qu ...
-
浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
-
Spark大型电商项目实战-及其改良(1) 比对sparkSQL和纯RDD实现的结果
代码存在码云:https://coding.net/u/funcfans/p/sparkProject/git 代码主要学习https://blog.csdn.net/u012318074/artic ...
-
Oracle中的NULL、’’（空字符串）以及’_’（空格）
本文首发于 http://youngzy.com/ 在Oracle中使用 null,''(空字符串),'_'(空格)时,有没有遇到问题?产生疑惑? null和’’(空字符串)是一个意思 注: 为了便于 ...
-
课堂作业：alpha发布点评
1. 新蜂 项目:游戏俄罗斯方块 基础玩法已实现,部分功能尚不完备,总的来说已经很出色了.不过希望下降加速那部分可以优化一下,不要按住↓加速,而是按一下就使当前方块加速下落至底部就好了. 2. 天 ...
-
雷林鹏分享：Ruby 范围（Range）
Ruby 范围(Range) 范围(Range)无处不在:January 到 December. 0 到 9.等等.Ruby 支持范围,并允许我们以不同的方式使用范围: 作为序列的范围 作为条件的范围 ...
-
020PHP基础知识——函数（三）
<?php /** * 任何数量的参数: * func_get_args() 接收一个数组,数组里面包含所有参数 * func_num_args() 取得共有几个参数 * func_get_ar ...