移动端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 ...
随机推荐
- Python敏感地址扫描和爬取工具
0×01 说明: 为了方便信息安全测评工作,及时收集敏感地址(初衷是爬取api地址),所以写了这么个小工具.两个简单的功能(目录扫描和url地址爬取). 0×02 使用参数: python spide ...
- 【NuGet】使用NuGet打包并发布至ProGet过程 (打包再次详解)【下篇】
一.前言 上篇[1]主要介绍了利用csproj文件使用NuGet打包至ProGet的过程,并附上了用于在Jenkins上运行的python脚本.本篇的主要内容分为以下几点: 1. Nuspec与Nup ...
- [CodeVs3196]黄金宝藏(DP/极大极小搜索)
题目大意:给出n(≤500)个数,两个人轮流取数,每次可以从数列左边或者右边取一个数,直到所有的数被取完,两个人都以最优策略取数,求最后两人所得分数. 显然这种类型的博弈题,第一眼就是极大极小搜索+记 ...
- 【CF375C】Circling Round Treasures
Portal --> CF375C Solution 一个有趣的事情:题目中有很大的篇幅在介绍如何判断一个位置在不在所围的多边形中 那么..给了方法当然就是要用啊 首先是不能包含\('B'\ ...
- UESTC--1267
原题链接:http://www.acm.uestc.edu.cn/problem.php?pid=1267 分析:此题麻烦之处在于要输出最小最长上升子序列,关键在于如何解决最小这个问题. 我的做法是从 ...
- [linux]linuxI/O测试的方法之dd
参考http://www.thomas-krenn.com/en/wiki/Linux_I/O_Performance_Tests_using_dd Measuring Write Performan ...
- ubuntu系统安装与卸载软件常用命令
一.unbuntu下的软件安装方式 1.deb包的安装方式 deb是debian系Linux的包管理方式,ubuntu是属于debian系的Linux发行版,所以默认支持这种软件安装方式,当下载到一个 ...
- bzoj 2502 清理雪道 (有源汇上下界最小流)
2502: 清理雪道 Time Limit: 10 Sec Memory Limit: 128 MB Description 滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场 ...
- Flying to the Mars
D - Flying to the Mars Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I ...
- JVM学习十:JVM之垃圾收集器及GC参数
接近两个月左右没有写博客,主要是因为小孩过来后,回家比较忙,现在小孩端午送回家了,开始继续之前的JVM学习之路,前面学习了GC的算法和种类,那么本章则是基于算法来产生实际的用途,即垃圾收集器. 一.堆 ...