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


Posted in Javascript onApril 17, 2015

移动端触屏滑动的效果其实就是图片轮播,在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元标签来设置。

2.禁止滚动
preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
event.preventDefault();

使用案例:

<!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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
小程序如何构建骨架屏
May 29 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 #Javascript
JavaScript对象反射用法实例
Apr 17 #Javascript
深入分析Javascript跨域问题
Apr 17 #Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 #Javascript
JavaScript中split() 使用方法汇总
Apr 17 #Javascript
javascript模拟命名空间
Apr 17 #Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 #Javascript
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
python字符串连接方法分析
2016/04/12 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
信号生成及DFT的python实现方式
2020/02/25 Python
深入了解Python 变量作用域
2020/07/24 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
幼儿园门卫制度
2014/01/29 职场文书
父母对孩子说的话
2014/04/12 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
禁毒宣传标语
2014/06/19 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2015大学生实训报告
2014/11/05 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android