文章分类

标签导航

JS移动端触屏滑动实例

发布时间:2015-01-26 17:15:18 访问次数:3551 【关闭此页】

  移动端触屏滑动多用于图片轮播展示,在PC页面上由于有鼠标辅助,用点击按钮的方式就能够很好的实现。但是在移动设备上,毕竟手指不如鼠标精准,点击起按钮来就要费事的多,因此,要实现图片轮播的控制,最直接的方式就是运用手指滑动来操作了。就需要用到移动端屏幕的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件
  touchstart:手指放到屏幕上时触发
  touchmove:手指在屏幕上滑动式触发
  touchend:手指离开屏幕时触发
  touchcancel:系统取消touch事件的时候触发,这个好像比较少用

事件对象
  每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
  touches:当前屏幕上所有手指的列表
  targetTouches:当前dom元素上手指的列表
  changedTouches:涉及当前事件的手指的列表

touch对象属性
  这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
  clientX、clientY:触摸点相对浏览器窗口的位置
  pageX、pageY:触摸点相对于页面的位置
  screenX、screenY:触摸点相对于屏幕的位置
  identifier:touch对象的ID
  target:当前的DOM元素

实例
  下面是自己写的一个触屏滑动的实例,实例分两部分,一是必须直接用手机访问的页面;另一是必须用电脑访问的页面(用鼠标模拟手指滑动)。
  由于其可以根据屏幕大小自适应,所以就不引入到本页面来测试了。有兴趣的同学可以看看:http://www.joyiu.com/demo/slider/1.html

本文标签:网页设计JavaScript
首 页|关于我们|网站建设|域名服务|虚拟主机|百度优化|成功案例|资讯中心|联系方式