js判断手机的左右滑动
js代码
$(function() {
function judge() {
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var el = document.getElementById('io');//触摸区域。
function cons() { //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
if (startx > endx) { //判断左右移动程序
alert("left");
} else {
alert("right");
}
}
el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[].clientX;
starty = touch[].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[].clientX;
endy = touch[].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执行,而不是放在touchstart事件里执行,这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的,所以在此函数中都可以访问得到,所以只需要注意事件执行的先后顺序即可。
});
}
judge();
})
html随便写就可以 记得id要对应
<body>
<div style="width: 100%;height: 3000px;background: #08c;" id="io"> </div>
</body>
js判断手机的左右滑动的更多相关文章
- js判断手机 横屏模式
js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...
- js判断手机浏览器操作系统和微信浏览器的方法
做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- js判断手机浏览器是横屏or竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...
- js判断手机系统和微信
//判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipa ...
- js判断手机是否安装了某一款app,有则打开,没有去下载
function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- 【转】js判断手机访问网页
原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: JS实现: ...
- JS判断手机访问跳转到手机站
这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //wi ...
随机推荐
- python 使用uuid 出现重复
同时保存入数据库时候 ,使用 uuid.uuid1() 后出现 重复的 id , 现在 修改为 (uuid.uuid5(uuid.NAMESPACE_DNS, str(uuid.uuid1()) ...
- VirtualBox下vim无法正常使用问题解决
由原来的使用VMware转到使用Virtual Box,发现其vim编辑器不是特别好用,需要进行一下更改设置: 1.使用命令删除vim,sudo apt-get remove vim-common 2 ...
- python面向对象之反射和内置方法
一.静态方法(staticmethod)和类方法(classmethod) 类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被 ...
- May I see you again?【我可以再见到你吗?】
May I see you again "May I see you again?" he asked. There was an endearing nervousness in ...
- visual studio cl -d1reportSingleClassLayout查看内存f分布
C:\Users\Administrator\Desktop\cppsrc>cl -d1reportSingleClassLayoutTeacher virtual.cpp 用于 x86 的 M ...
- 离线安装 Visual Studio Express 而不下载整个镜像文件的方法(转载)
转 visual studio 2010 express 全序列号 phone开发工具YDK44-2WW9W-QV7PM-8P8G8-FTYDF VC# 2010 Express: PQT8W-68Y ...
- 常州大学新生寒假训练会试 I 合成反应
题目描述 有机合成是指从较简单的化合物或单质经化学反应合成有机物的过程. 有时也包括从复杂原料降解为较简单化合物的过程. 由于有机化合物的各种特点,尤其是碳与碳之间以共价键相连,有机合成比较困难,常常 ...
- Appium环境搭建及“fn must be a function”问题解决
由于appium在线安装比较困难,大多数应该是由于FQ造成的吧,索性直接下载appium安装包:http://pan.baidu.com/s/1bpfrvjD nodejs下载也很缓慢,现提供node ...
- easyui的layout
1.浏览器自适应(即浏览器改变大小,里面的表格大小也会随之改变)要设置两个参数 (1)一般都要在body上设置class=“easyui-layout”: <body class="e ...
- MongoDB快速入门学习笔记4 MongoDB的文档查询操作
先把student删除,再重新插入数据 > db.student.drop() true > db.student.insert([{ "_id" : 1, " ...