html5滑动事件代码
$(".header").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".header").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
//左滑
if ( X > 0 ) {
if(X>150){
console.log('左滑',X);
}
}
//右滑
else if ( X < 0 ) {
if(X<-150){
console.log('右滑',X);
}
}
//下滑
else if ( Y > 0) {
console.log('下滑', Y);
}
//上滑
else if ( Y < 0 ) {
console.log('上滑', Y);
}
//单击
else{
console.log('单击');
}
});
html5滑动事件代码的更多相关文章
- 移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- HTML5滑动(swipe)事件
移动H5开发中经常用到滑动效果(页面上移.下移.向左滑动.向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart.touchmove和touchend)模拟swip ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
- android ViewPager滑动事件讲解
首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChan ...
- Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突
为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLay ...
随机推荐
- Vue-admin工作整理(十): Vuex-Actions(模拟接口请求实现组件字段更新)
思路:通过提交一个 mutation,而不是直接变更状态,它可以包括异步操作,通过请求接口,定义一个方法,第一个参数为对象,在里面能够提取到一些东西,比如:commit,这是一个方法,调用这个comm ...
- day22
# day22 ## 复习 ```python# 1.内存管理# 引用计数:垃圾回收机制工作原理# -- 引用就 +1 ,释放就 -1 , 当计数为0时,就会被垃圾回收机制回收 # 标记清除:解决循环 ...
- CDH 报错:under replicated blocks
1.刚安装好CDH5.16.1集群(2个节点)出现了under replicated blocks错误,如下图 2.原因是CDH默认文件备份3份,而我们只有2节点,所以解决方法如下: ①集群增加一个新 ...
- linux mkdir命令
1 mkdir,创建一个空目录. 比如:mkdir test 2 mkdir -p,递归创建目录. 比如:mkdir -p a/b.迭代创建. 3 mkdir -m 777 d 创建权限为777的目录 ...
- es安装ik后报错无法启动 read write
https://elasticsearch.cn/question/877 elasticsearch所在路径文件夹名称中带空格,路径错误
- Eclipse安装TestNG
1.在Eclipse中点击Help菜单,选择Install New Software选项,在弹出页面中输入安装地址即可安装. http://beust.com/eclipse 2. 3. 4. 等待T ...
- React文档(十九)不使用ES6
通常你会将一个React组件定义成一个普通的js类: class Greeting extends React.Component { render() { return <h1>Hell ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- count性能
表有主键列,count(1)的效率会稍微高于count(*),count(主键列)效率会高于count(1).表没有主键列,count(1)效率会高于count(*) count(1).count(* ...
- hbase-0.92.1集群部署
环境 主机名 IP地址 角色 安装目录 sht-sgmhadoopnn-01 172.16.101.55 NameNode.SecondaryNameNode. JobTracker.HMaster ...