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 ...
随机推荐
- 数据类型 varchar 和 uniqueidentifier 在 add 运算符中不兼容
select '<a href="/'+a.id +'" title="'+ a.title +'">'+a.Title+'</a>' ...
- 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系
首先用一段通俗易懂但是不是非常专业的话描述一下三者的概念.区别和联系. Gradle是个构建系统,能够简化你的编译.打包.测试过程.熟悉Java的同学,可以把Gradle类比成Maven. Gradl ...
- _trigger
-- 触发器设置-- 使用说明:-- 1.脚本名为TriggerScript,使用时添加该生物即可-- 2.可以控制玩家进入附近时是上马.下马.或者提示信息.
- d3.event=null
d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...
- MySQL 存储过程返回多个值
MySQL 存储过程返回多个值 在本教程中,您将学习如何编写/开发返回多个值的存储过程. MySQL存储函数只返回一个值.要开发返回多个值的存储过程,需要使用带有INOUT或OUT参数的存储过程 ...
- erlang的热更新
erlang作为一个为电信级别而出现的语言,热更新是其最重要的特性之一 热代码升级-Erlang允许程序代码在运行系统中被修改.旧代码能被逐步淘汰而后被新代码替换.在此过渡期间,新旧代码是共存的. ...
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- Linux Shell函数定义与调用
一.Shell函数定义格式 shell函数定义格式,各部分说明如下: [ function ]等中括号括起来部分----表示可选(即可有可无) your_function_name部分----为函数名 ...
- mysql实现随机获取几条数据的方法
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xionglangs/article/details/50630758sql语句有几种写法 1:SEL ...
- python - 递归 二分法
一.一些内置函数 1.revsered 翻转,返回的是迭代器 # 将 s 倒置 s = '不是上海自来水来自海上' # 方法一 print(s[::-1]) # 方法二 s1 = reversed( ...