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引用对象的方法
Jan 11 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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 和 MySQL 基础教程(一)
2006/10/09 PHP
Banner程序
2006/10/09 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php socket通信简单实现
2016/11/18 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
多个python文件调用logging模块报错误
2020/02/12 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
逃课检讨书范文
2015/05/06 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技