JavaScript触屏滑动API介绍
随着触屏手机、平板电脑的普及和占有更多用户和使用时间，触屏的触碰、滑动等事件也成为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介绍的更多相关文章
- 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事件 ...
随机推荐
- AFNetworking 3.0 源码解读 总结（干货）（上）
养成记笔记的习惯,对于一个软件工程师来说,我觉得很重要.记得在知乎上看到过一个问题,说是人类最大的缺点是什么?我个人觉得记忆算是一个缺点.它就像时间一样,会自己消散. 前言 终于写完了 AFNetwo ...
- [原]一个针对LVS的压力测试报告
LVS 测试报告 测试计划 基本功能测试 流量压力测试 响应时间测试 配置正确性测试 灾难恢复测试 测试点 基本功能测试 客户端IP地址正确性 RealServer 访问Internet测试(包括Ip ...
- ASP.NET Core 中文文档 第四章 MVC（4.1）Controllers, Actions 和 Action Results
原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...
- Linux杀死进程，查看进程
http://blog.csdn.net/wojiaopanpan/article/details/7286430/
- git
CMD命令:git initgit add . [添加文件至暂存区]git commit -m '描述性语句 随意写即可'git branch gh-pages [创建仓库分支]git checkou ...
- 设计模式之工厂模式VS抽象工厂
一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...
- (转) 从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）
原文地址: http://www.cnblogs.com/lyhabc/p/4682986.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第三篇,这一篇才真正开始搭建Alwa ...
- Apache2.4：AH01630 client denied by server configuration
问题说明:Apache服务总共有4个,是为了防止单点故障和负载均衡,负载均衡控制由局方的F5提供. 访问的内容在NAS存储上,现象是直接访问每个apache的服务内容都是没有问题,但是从负载地址过来的 ...
- 聊聊从web session的共享到可扩展缓存设计
先从web session的共享说起 许多系统需要提供7*24小时服务,这类系统肯定需要考虑灾备问题,单台服务器如果宕机可能无法立马恢复使用,这必定影响到服务.这个问题对于系统规模来说,从小到大可 ...
- C#将Word转换成PDF方法总结(基于Office和WPS两种方案)
有时候,我们需要在线上预览word文档,当然我们可以用NPOI抽出Word中的文字和表格,然后显示到网页上面,但是这样会丢失掉Word中原有的格式和图片.一个比较好的办法就是将word转换成pdf,然 ...