JavaScript触屏滑动API介绍

时间:2023-02-02 09:30:32

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

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

手机或者其他触屏设备扫描二维码体验效果:
JavaScript触屏滑动API介绍

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

使用三个手指一起滑动的效果图如下:
JavaScript触屏滑动API介绍

代码如下:

<!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介绍的更多相关文章

  1. Javascript触屏手势库-JTouch&lpar;更新V1&period;1&rpar;

    作者:痞子|时间: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. 使用XmlHelper添加节点C&num;代码

    接着上一篇:http://keleyi.com/a/bjac/ttssua0f.htm在前篇文章中,给出了C# XML文件操作类XmlHelper的代码,以及使用该类的一个例子,即使用XmlHelpe ...

  2. WebClient 使用

    --post  请求 public static string PostMsg(Guid orgid, int page, int rows)        {            System.N ...

  3. impdp的一些实际问题解决方法

    之前在http://blog.csdn.net/bisal/article/details/19067515写过一篇关于expdp和impdp的实践的帖子.今天碰到个问题,有些内容没有介绍全,这里再补 ...

  4. HTML5 DOM扩展

    一.选择符 1. querySelector()方法:返回与该模式匹配的第一个元素 //取得body元素 var body = document.querySelector("body&qu ...

  5. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  6. Spark大型电商项目实战-及其改良&lpar;1&rpar; 比对sparkSQL和纯RDD实现的结果

    代码存在码云:https://coding.net/u/funcfans/p/sparkProject/git 代码主要学习https://blog.csdn.net/u012318074/artic ...

  7. Oracle中的NULL、’’(空字符串)以及’&lowbar;’(空格)

    本文首发于 http://youngzy.com/ 在Oracle中使用 null,''(空字符串),'_'(空格)时,有没有遇到问题?产生疑惑? null和’’(空字符串)是一个意思 注: 为了便于 ...

  8. 课堂作业:alpha发布点评

    1.  新蜂 项目:游戏俄罗斯方块 基础玩法已实现,部分功能尚不完备,总的来说已经很出色了.不过希望下降加速那部分可以优化一下,不要按住↓加速,而是按一下就使当前方块加速下落至底部就好了. 2.  天 ...

  9. 雷林鹏分享:Ruby 范围(Range)

    Ruby 范围(Range) 范围(Range)无处不在:January 到 December. 0 到 9.等等.Ruby 支持范围,并允许我们以不同的方式使用范围: 作为序列的范围 作为条件的范围 ...

  10. 020PHP基础知识——函数(三)

    <?php /** * 任何数量的参数: * func_get_args() 接收一个数组,数组里面包含所有参数 * func_num_args() 取得共有几个参数 * func_get_ar ...