python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在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();
案例:
下面给出一个案例,需在移动设备上才能看出效果。
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绑定事件。
代码事例1:
.div{text-align: center;font-size:30px;}
function getcolor(){
var color_arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function suiji(){
return Math.floor(Math.random()*16);
}
var colorSTR ="#"+color_arr[suiji()]+color_arr[suiji()]+color_arr[suiji()]+color_arr[suiji()]+color_arr[suiji()]+color_arr[suiji()];
return colorSTR;
}
var divd = $(".div");
divd.each(function(index){
$(this).on('touchstart', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
//要做的事情
}).on('touchmove', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
//console.log(e.targetTouches)
//console.log(event.targetTouches[0].clientX+"/"+event.targetTouches[0].clientY+"/"+event.targetTouches[0].pageX+"/"+event.targetTouches[0].pageY)
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0]; // 把元素放在手指所在的位置
$(this).css("left",(touch.pageX- parseInt($(this).width())/2 + 'px'));
$(this).css("top",(touch.pageY- parseInt($(this).height())/2 + 'px'));
$(this).css("background", getcolor());
}
}).on('touchend', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
$(this).css("background",getcolor());
})
});
效果图1(这些色块都可以随意拖动):
代码事例2:
移动端触摸滑动
*{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;}
-
20140813镜面的世界,终究只是倒影。看得到你的身影,却触摸不到你的未来
-
20140812锡林浩特前往东乌旗S101必经之处,一条极美的铁路。铁路下面是个小型的盐沼,淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过,只好继续赶往东乌旗。
-
20140811水的颜色为什么那么蓝,我也纳闷,反正自然饱和度和对比度拉完就是这个颜色的
-
海洋星球3重庆天气热得我想卧轨自杀
-
以上这些作品分别来自两位设计师作为观者,您能否通过设计风格进行区分
1
2
3
4
5
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();
效果图2(在手机上手指滑动图片可以进行图片切换):
python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果相关推荐
- 【墙裂推荐】【原生基础版】js原生实现拖拽效果,注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好,推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
- html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
- 史上最全蓝屏代码!电脑蓝屏了查一下什么原因吧!
2019独角兽企业重金招聘Python工程师标准>>> 以下方法仅适用win8以前的系统win8及win8以后的系统需要其他方法! 蓝屏 A problem has been det ...
- Windows 7 蓝屏代码大全 amp; 蓝屏全攻略
关于Windows 7.Vista等系统的蓝屏.之前软媒在Win7之家和Vista之家都有非常多文章讨论过,可是都是筛选的常见的一些问题,今天这个文章是个大全.希望大家看着别头痛.文章收藏下来以后待查 ...
- win10蓝屏代码_电脑蓝屏代码在哪看?如何解决
电脑蓝屏在哪看代码?知道了代码又如何解决呢?在使用电脑时难免会遇到蓝屏问题,有时重启能解决,那么重启解决不了该怎么办呢?今天小编就将查看电脑蓝屏代码方法以及解决教程分享给你们. 电脑蓝屏代码在哪看?如 ...
- 计算机蓝屏代码0x000000ED,电脑蓝屏代码0x000000ed解决步骤
电脑蓝屏代码现象是我们在使用电脑中最常见的一种启动问题,令小白用户很头痛 .比如,我们在启动电脑的时候,它并没有正常地启动,屏幕反而一片蓝色,出现了一串奇怪的代码:0x000000ed,怎么办?下面, ...
- win10蓝屏代码_?联想电脑蓝屏的解决方法教程
联想电脑蓝屏怎么办呢?蓝屏在电脑上的出现是几乎每一个电脑小用户都会遇到的问题.首先,我们需要知道,电脑的蓝屏通常是由两种情况引起的:硬件问题或软件问题.软件问题可能是由病毒.驱动程序.软件兼容性.系统 ...
- 蓝屏代码000c2_电脑蓝屏怎么办?Win8蓝屏故障0x000000c2的解决方法
电脑出现蓝屏的时候,就会显示一系列的蓝屏代码,供大家去分析看看是哪里出的问题.最近,Win7系统用户的电脑遇到蓝屏,提示错误代码:0x000000c2,要如何解决这个问题呢?下面,U大侠小编就给大家介 ...
- QQ登不上出现蓝屏代码0X000000EA,电脑蓝屏的解决方法
电脑蓝屏是计算机故障的一部分,往往出现电脑蓝屏的原因是由于不兼容硬件和驱动程序,或者是某些有问题的软件,严重的话可能电脑中了病毒.当电脑出现蓝屏的时候,大家第一反应就是重启计算机,在大多数情况下重启计 ...
最新文章
- 【青少年编程(第24周)】Python-Turtle组队学习结营!
- 数据结构-String、char
- 不是python对文件的读操作方法的是-python的文件操作方法
- C++基本序列式容器效率比较
- 高一数学集合知识点整理_高一数学知识点总结
- ASP.NET MVC中使用DropDownList
- Q86:镜面反射(Mirror Reflection)
- Visual Studio2013配置安装Opencv2.4.9详细过程
- python绘图坐标轴|刻度值|刻度||标题设置
- 科学计算matlab尔雅答案,科学计算与MATLAB语言2019尔雅答案
- 7个等级 容灾等级_猫奴的10个等级 你的奴性有多高?
- 计算机编程与数控宏程序实例教程,数控车床编程教程,图文实例详解
- MySQL8.0 - 新特性 - Descending Index
- 算术右移与逻辑右移的区别
- 昨日种种,昨日死.今日种种,今日生.--看了几篇影评有感
- 计算机发明者约翰·冯·诺依曼
- 在Linux命令行上计划自己的假期日历
- lg g5 android,【LGG5SE评测】Android中的SE 模块化LG G5 SE评测(全文)_LG G5 SE_手机评测-中关村在线...
- 小米隔空充电技术,肌肉还是鸡肋?
- 浙江农林大学ACM集训队2019级队长退役回忆录(未实际退役版本)
热门文章
- oracle显示上午下午,Oracle实现使用时间函数实现输出“上午好/...
- 基恩士XG-XvisionEditor修改程序ID号
- 分享让世界更美丽,TopSemic有奖征文
- ubuntu中中文名新加卷修改为英文名新加卷
- BufferedImage是什么意思?
- Vmotion迁移要求
- python——合数分解
- Web全栈开发学习笔记—Part2 与服务端通信—d.在服务端将数据Alert出来
- 《飞屋环游记》让心去旅行
- 解决 Maven工程运行报错Failed to clean project: Failed to delete