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 ...
随机推荐
- pycahrm git配置笔记
1. 在file - setting - plugins 中查看是否有github插件, 此处是用于处理插件位置
- 项目10.2-企业级自动化运维工具---puppet详解
1.认识puppet 1.1 引入 puppet是什么,咱们先不用专业的名词解释它,咱们先描述一些工作场景,看明白这些工作场景,自然会知道puppet是什么. (1)场景一: 管理员想要在100台服务 ...
- python笔记-dict字典的方法2
#!/usr/bin/env python #-*- coding:utf-8 -*- ''' 概述: 使用键值(key-value)存储,具有极快的查找速度 注意:字典是无序的 key的特性: 1. ...
- 学习Pytbon第七天,集合
list_1=[5,22,2,6,5,66,6,8] list_1=set(list_1)#把列表转成集合,天生不允许 重复 print(list_1,type(list_1) list_2=set( ...
- Python中的tuple
tuple_lst = [ ('元祖容器可哈希',), ('元祖中的元素不可直接修改',), ('元祖可迭代',), ('查',), ('练习',), ] 元祖容器可哈希 >>>ha ...
- Python9-前端基础知识-day47
web开发本质: 1.浏览器输入网址回车都发生了什么? 1.浏览器给服务端发送一个消息 2.服务端拿到消息 3.服务端返回消息 4.浏览器展示页面C/S架构----B/S架构客户端和服务端 消息的格式 ...
- Codeforces Round #461 (Div. 2) D. Robot Vacuum Cleaner
D. Robot Vacuum Cleaner time limit per test 1 second memory limit per test 256 megabytes Problem Des ...
- 菜鸟学Linux - 设置文件/文件夹的权限
在Linux中,我们可以对文件或文件夹设置权限(r,w,x,-).然而,对文件和文件夹的权限设置,具有不同的意义.下面,通过几个例子来了解一下权限的意义所在.在开始之前,我们需要了解几个修改权限的命令 ...
- 「微信小程序免费辅导教程」24,基础内容组件icon的使用探索与7月26日微信公众平台的更新解读
- luogu2120 [ZJOI2007]仓库建设
大米饼写的太棒辣qwqqwq #include <iostream> #include <cstdio> using namespace std; typedef long l ...