移动端touch滑屏事件
<script>
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height());
// console.log($('body').height());
$body.css("height", windowHeight);
// console.log($('body').height()); $("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 10 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 10 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 10) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 10 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
</script>
移动端touch滑屏事件的更多相关文章
- /touch滑屏事件
//touch滑屏事件 var windowHeight = $(window).height(), $body = $("body"); $body.cs ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- H5-移动端实现滑屏翻页-原生js/jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端与PC端的触屏事件
由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchs ...
- JS移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- javascript移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- mobile_竖向滑屏
竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端,"手指按下","手指移动" 两个事件即可(且不需要嵌套),有需要时才使用 "手指离 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
随机推荐
- 洛谷 P1678 烦恼的高考志愿
题目背景 计算机竞赛小组的神牛V神终于结束了万恶的高考,然而作为班长的他还不能闲下来,班主任老t给了他一个艰巨的任务:帮同学找出最合理的大学填报方案.可是v神太忙了,身后还有一群小姑娘等着和他约会,于 ...
- Python下json中文乱码解决办法
json.dumps在默认情况下,对于非ascii字符生成的是相对应的字符编码,而非原始字符,只需要 #coding=utf8 import json js = json.loads('{" ...
- 转: 解决【Unable to make the session state request to the session state server】
错误描述: Unable to make the session state request to the session state server. Please ensure that the A ...
- redis的Pub/Sub功能
Pub/Sub功能(即Publish,Subscribe)意思是发布及订阅功能.简单的理解就像我们订阅blog一样,不同的是,这里的客户端与server端采用长连接建立推送机制,一个客户端发布消息,可 ...
- Hbase(一)基础知识
一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...
- [杂谈]ACM启程
此处省略一大段传奇的经历. 只需要知道的是,现在再次开始使用本博客的唯一原因就是——我进大学有搞ACM的打算. 其实本来是没有的,受到某学长的指引和推荐,我觉得这条路在当前确切是绝对的优选. 2年没碰 ...
- 课程14:get和post是神马
http://www.codeschool.cn/lesson/14.html get和post是神马? get和post是http中两种最常用到的请求类型 简单理解get请求 get请求多用于获取信 ...
- Nginx -- proxy_pass配置
一.proxy_pass 作用域: location 不影响浏览器地址栏的url 设置被代理server的协议和地址 协议可以为http或https 地址可以为域名或IP 二.配置规则 2.1 测试环 ...
- jni里找不到刚添加的C++函数
使用NDK开发,用到了JNI来连接C++和JAVA. 当C++方增加了一个新函数,jni访问此函数,eclipse会提示找不到改函数,然后前面打个红叉叉表示语法错误,从而阻碍了编译和运行. 当我选择清 ...
- OpenCV---ROI(region of interest)和泛洪填充
一:ROI 感兴趣区(Region of Interest,ROIs) 是图像的一部分,它通过在图像上选择或使用诸如设定阈值(thresholding) 或者从其他文件(如矢量> 转换获得等方法 ...