移动端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 ...
随机推荐
- Halum UVA - 11478(差分约束 + 二分最小值最大化)
题意: 给定一个有向图,每条边都有一个权值,每次你可以选择一个结点v和一个整数d,把所有以v为终点的边的权值减小d,把所有以v为起点的边的权值增加d,最后要让所有边权的最小值非负且尽量大 两个特判 1 ...
- windows7下的64位redis安装简介
在网上找了好多,指向的都是同一个地址,可惜打不开.https://github.com/MSOpenTech/redis/releases.网址被禁掉了.终于找到一篇有用的帖子,安装成功.感谢仁兄ko ...
- 【bzoj2500】幸福的道路
Portal -->bzoj2500 Description 给你一棵树,每条边有边权,有两个给给的人第\(i\)天会从编号为\(i\)的点出发走这个点的树上最长距离,现在要你求一个最长的 ...
- C之面向对象编程20170707
语言只是工具,设计思维才是根本.C虽然是面向过程的语言,但也是可以实现面向对象编程的,本文就是介绍如何使用C语言实现面向对象编程. 我们知道面向对象主要有三大特性:封装,继承,和多态,下面就从这个三个 ...
- Centos 7.3 下 的QT 输入中文
我的QT 目录在 /opt/Qt/Tools/QtCreator,进入到 /bin 目录,然后运行 ./qtcreator.sh 就可以运行 在qtcreator.sh 中加入 export QT_ ...
- SP1487 PT07J - Query on a tree III (主席树)
SP1487 PT07J - Query on a tree III 题意翻译 你被给定一棵带点权的n个点的有根数,点从1到n编号. 定义查询 query(x,k): 寻找以x为根的k大点的编号(从小 ...
- mysql5.7 安装常见问题
mysql 5.7安装要执行以下三个命令: 1.mysql install2.mysqld --initialize3.net start mysql 第一个命令可能会出现Install/Remove ...
- windows下libcurl与zlib和ssl共同编译
下载了curl 7.37,在project里有各个版本VS对应的项目文件,我们选择合适的打开即可以编译,根据不同的项目配置输出想要的库,比如可以切换多种SSL库,dll/lib,debug/relea ...
- centos7下安装mysql5.7.24
第一步:下载rpm包 sudo wget http://repo.mysql.com/yum/mysql-5.7-community/el/7/x86_64/mysql57-community-rel ...
- Codeforces 807 A Is it rated?
http://codeforces.com/problemset/problem/807/A A. Is it rated? time limit per test 2 se ...