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 ...
随机推荐
- js switch 用法
//获取星期 //例子1 var day=new Date().getDay(); switch (day) { : x="Today it's Saturday"; break; ...
- CSS之不常用但重要的样式总结
1,设置颜色渐变 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.67), rgba(255, 255, 255, 0));( ...
- git删除远程分支,删除本地分支
远程 # git push origin --delete duck - [deleted] duck 本地 # git branch -d duck 已删除分支 duck(曾为 dda11b8). ...
- IDEA 介绍
转载:https://blog.csdn.net/kanchaishaonian/article/details/81107210 前言:IntelliJ IDEA 如果说IntelliJ IDEA是 ...
- .Net Core文件上传
https://www.cnblogs.com/viter/p/10074766.html 1.内置了很多种绑定模型 缺少了一个FromFileAttribute 绑定模型 需要自己实现一个 pub ...
- 融云(API)
先记录下融云API地址:真是难找 IMKit: https://www.rongcloud.cn/docs/api/android/imkit/index.html IMLib: https://ww ...
- NetSec2019 20165327 Exp6 信息搜集与漏洞扫描
NetSec2019 20165327 Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 ...
- 20165303魏煜第一周kali安装
1.根据网址下载kali 这是kali的下载地址https://www.kali.org 找到download选择Kali Linux 64 bit VMware VM,点击后面蓝色部分开始下载选择6 ...
- 解决angular ui-grid 中添加input date修改日期
需求:在angular ui-grid列表中添加一个日期组件来修改时间. 在angular ui-grid添加了一个html5 date input,后端返回的数据是YYYY-MM-DD,比如:201 ...
- CSS自定义多个字体引用
在 HTML 中,提供给我们的默认字体有很多,但因为在电脑上安装的字体有限,所以很多时候不能呈现出和设计稿上一样的效果,这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了 ...