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

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY:      //触摸点相对浏览器窗口的位置

pageX / pageY:       //触摸点相对于页面的位置

screenX  /  screenY:    //触摸点相对于屏幕的位置

identifier:        //touch对象的ID

target:       //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

案例：

下面给出一个案例，需在移动设备上才能看出效果。

1.定义touchstart的事件处理函数，并绑定事件：

if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);

//定义touchstart的事件处理函数
start:function(event){
　　var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
　　startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
　　isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
　　this.slider.addEventListener('touchmove',this,false);
　　this.slider.addEventListener('touchend',this,false);
},

触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。

2.定义手指在屏幕上移动的事件，定义touchmove函数。

//移动
move:function(event){
　　//当屏幕有多个touch或者页面被缩放过，就不执行move操作
　　if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
　　var touch = event.targetTouches[0];
　　endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
　　isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
　　if(isScrolling === 0){
　　　　event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
　　　　this.slider.className = 'cnt';
　　　　this.slider.style.left = -this.index*600 + endPos.x + 'px';
　　}
},

同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。

3.定义手指从屏幕上拿起的事件，定义touchend函数。

//滑动释放
end:function(event){
　　var duration = +new Date - startPos.time; //滑动的持续时间
　　if(isScrolling === 0){ //当为水平滚动时
　　　　this.icon[this.index].className = '';
　　　　if(Number(duration) > 10){
　　　　　　//判断是左移还是右移，当偏移量大于10时执行
　　　　　　if(endPos.x > 10){
　　　　　　　　if(this.index !== 0) this.index -= 1;
　　　　　　}else if(endPos.x < -10){
　　　　　　　　if(this.index !== this.icon.length-1) this.index += 1;
　　　　　　}
　　　　}
　　　　this.icon[this.index].className = 'curr';
　　　　this.slider.className = 'cnt f-anim';
　　　　this.slider.style.left = -this.index*600 + 'px';
　　}
　　//解绑事件
　　this.slider.removeEventListener('touchmove',this,false);
　　this.slider.removeEventListener('touchend',this,false);
},

手指离开屏幕后，所执行的函数。这里先判断手指停留屏幕上的时间，如果时间太短，则不执行该函数。再判断手指是左滑动还是右滑动，分别执行不同的操作。最后很重要的一点是移除touchmove,touchend绑定事件。

源代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title>移动端触摸滑动</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's js lib" />

 <meta name="description" content="移动端触摸滑动" />

 <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

 <style>

 *{margin:0;padding:0;}

 li{list-style:none;}

 .m-slider{width:600px;margin:50px 20px;overflow:hidden;}

 .m-slider .cnt{position:relative;left:0;width:3000px;}

 .m-slider .cnt li{float:left;width:600px;}

 .m-slider .cnt img{display:block;width:100%;height:450px;}

 .m-slider .cnt p{margin:20px 0;}

 .m-slider .icons{text-align:center;color:#000;}

 .m-slider .icons span{margin:0 5px;}

 .m-slider .icons .curr{color:red;}

 .f-anim{-webkit-transition:left .2s linear;}

 </style>

 </head>

 <body>

 <div class="m-slider">

     <ul class="cnt" id="slider">

         <li>

             <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg">

             <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>

         </li>

         <li>

             <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">

             <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>

         </li>

         <li>

             <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg">

             <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>

         </li>

         <li>

             <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg">

             <p>海洋星球3重庆天气热得我想卧轨自杀</p>

         </li>

         <li>

             <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">

             <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>

         </li>

     </ul>

     <div class="icons" id="icons">

         <span class="curr">1</span>

         <span>2</span>

         <span>3</span>

         <span>4</span>

         <span>5</span>

     </div>

 </div>

 <script>

 var slider = {

     //判断设备是否支持touch事件

     touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,

     slider:document.getElementById('slider'),

     //事件

     events:{

         index:0,     //显示元素的索引

         slider:this.slider,     //this为slider对象

         icons:document.getElementById('icons'),

         icon:this.icons.getElementsByTagName('span'),

         handleEvent:function(event){

             var self = this;     //this指events对象

             if(event.type == 'touchstart'){

                 self.start(event);

             }else if(event.type == 'touchmove'){

                 self.move(event);

             }else if(event.type == 'touchend'){

                 self.end(event);

             }

         },

         //滑动开始

         start:function(event){

             var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch

             startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值

             isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动

             this.slider.addEventListener('touchmove',this,false);

             this.slider.addEventListener('touchend',this,false);

         },

         //移动

         move:function(event){

             //当屏幕有多个touch或者页面被缩放过，就不执行move操作

             if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;

             var touch = event.targetTouches[0];

             endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};

             isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;    //isScrolling为1时，表示纵向滑动，0为横向滑动

             if(isScrolling === 0){

                 event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏

                 this.slider.className = 'cnt';

                 this.slider.style.left = -this.index*600 + endPos.x + 'px';

             }

         },

         //滑动释放

         end:function(event){

             var duration = +new Date - startPos.time;    //滑动的持续时间

             if(isScrolling === 0){    //当为水平滚动时

                 this.icon[this.index].className = '';

                 if(Number(duration) > 10){

                     //判断是左移还是右移，当偏移量大于10时执行

                     if(endPos.x > 10){

                         if(this.index !== 0) this.index -= 1;

                     }else if(endPos.x < -10){

                         if(this.index !== this.icon.length-1) this.index += 1;

                     }

                 }

                 this.icon[this.index].className = 'curr';

                 this.slider.className = 'cnt f-anim';

                 this.slider.style.left = -this.index*600 + 'px';

             }

             //解绑事件

             this.slider.removeEventListener('touchmove',this,false);

             this.slider.removeEventListener('touchend',this,false);

         }

     },

     //初始化

     init:function(){

         var self = this;     //this指slider对象

         if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);    //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性

     }

 };

 slider.init();

 </script>

 </body>

 </html>

JS案例之5——移动端触屏滑动的更多相关文章

  1. 移动端触屏滑动，JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

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

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

  3. 移动端触屏滑动touches使用

    代码 var start = { x: 0, y: 0 } var end = { x: 0, y: 0 } document.addEventListener('touchstart', funct ...

  4. 移动端 微信 网易 触屏滑动回弹菜单(css版)

    总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不 ...

  5. js移动端触屏事件

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

  6. H5案例分享：移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

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

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

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

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

  9. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

随机推荐

  1. iOS开发～UI布局（一）初探Size Class

    随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class.Size Class配合Auto Layout可以解决 ...

  2. iOS开发之网络数据解析--GDataXML解析框架的使用

      前言:GDataXML是google基于C语言libxml2写的第三方框架,该源码文件就一个类,看其源码,基本使用了C语言的底层的很多lib编译库代码,所以刚导入使用,会报错提示需要设置导入需要的 ...

  3. Xcode 插件失效的临时解决方案

    每当Xcode升级之后,都会导致原有的Xcode插件不能使用,这是因为每个插件的Info.plist中记录了该插件兼容的Xcode版本的DVTPlugInCompatibilityUUID,而每个版本 ...

  4. Linux与Windows共享文件夹之samba的安装与使用（Ubuntu为例）

    1.写在前面     当你在Windows上安装了一台Linux的虚拟机,你想访问Linux中的文件夹,将虚拟机中的文件复制到Windows主机上,你会怎么做呢?如果这台Linux主机不是虚拟机,而是 ...

  5. Effective Java 37 Use marker interfaces to define types

    Marker interface is an interface that contains no method declarations, but merely designates (or &qu ...

  6. Asp.Net实现WebApi跨域 （非MVC）

    目前WebApi在使用上大部分都是跟MVC组合的,而且使用起来也确实十分便利. 但有时候我们也需要在WebForm中使用WebApi,二者还是有一定区别的. 首先看下结构  ①ApiControlle ...

  7. java使用httpcomponents post发送json数据

    一.适用场景 当我们向第三方系统提交数据的时候,需要调用第三方系统提供的接口.不同的系统提供的接口也不一样,有的是SOAP Webservice.RESTful Webservice 或其他的.当使用 ...

  8. Json常用的转换

    简单记录一下jquery里面的JSON.parse()和JSON.stringify()函数,和js中的eval()函数的用法 1,JSON.parse 函数(常用) 作用:将 JavaScript ...

  9. O(N)时间的排序

    题目:某公司有几万名员工,请完成一个时间复杂度为O(n)的算法对该公司员工的年龄作排序,可使用O(1)的辅助空间. 要注意分析题目,一般排序要么是O(n^2),要么是O(nlogn).但这里题目特别强 ...

  10. 【学习/研发】嵌入式Linux/Android开发有它就够了——迅为4412开发板

    网站:http://www.topeetboard.com 光盘资料+网盘资料+配套视频+售后支持,助您加速学习研发的进程 产品介绍 iTOP-Exynos4412开发板采用 Exynos4412的主 ...