<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滑屏事件的更多相关文章

  1. /touch滑屏事件

    //touch滑屏事件     var windowHeight = $(window).height(),     $body = $("body");     $body.cs ...

  2. 移动端touch触屏滑动事件、滑动触屏事件监听!

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  3. H5-移动端实现滑屏翻页-原生js/jquery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动端与PC端的触屏事件

    由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchs ...

  5. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  6. javascript移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  7. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  8. mobile_竖向滑屏

    竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端,"手指按下","手指移动" 两个事件即可(且不需要嵌套),有需要时才使用 "手指离 ...

  9. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

随机推荐

  1. Toast与Snackbar的那点事

    背景 Toast是Android平台上的常用技术.从用户角度来看,Toast是用户与App交互最基本的提示控件:从开发者角度来看,Toast是开发过程中常用的调试手段之一.此外,Toast语法也非常简 ...

  2. 【Visual Installer】如何注册自已的文件类型

    一.前言 这几天在做公司软件产品的安装包,产品有一个特定的后缀名为:.isbimqs,需要的功能是双击该后缀名文件后,会有一个启动程序launchRevit.exe去打开Revit,由Revit去打开 ...

  3. 【BZOJ1491】【NOI2007】社交网络(最短路,动态规划)

    [BZOJ1491][NOI2007]社交网络(最短路,动态规划) 题面 BZOJ 洛谷 图片是假的,只能到OJ上看 Description 在社交网络(socialnetwork)的研究中,我们常常 ...

  4. [USACO4.1]麦香牛块Beef McNuggets 题解报告

    题目描述 农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在想尽一切办法让这种可怕的设想泡汤.奶牛们进行斗争的策略之一是"劣质的包装".& ...

  5. Yarn 模式 与 电影受众分析系统

    yarn模式分为两种模式: 一.Yarn-cluster模式 1.通过spark-submit提交spark jar包(Application),与RM进行通信请求启动AM 2.RM接收到请求之后,会 ...

  6. poj 1185 状态压缩

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 27926   Accepted: 10805 Descriptio ...

  7. poj1284 Primitive Roots

    Primitive Roots Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4775   Accepted: 2827 D ...

  8. json&pickle序列化

    一.用途 我们需要将内存中的数据进行序列化,即写入文件中时,写入的类型只能是字符串或者二进制类型.但是如果我们想要将复杂一些的数据类型,如:列表.字典或者函数之类的同样进行序列化,我们就要用到 jso ...

  9. 题解 UVA1184 【Air Raid】

    有向无环图(DAG)的最小路径覆盖的模板题. 定义:在一个有向图中,找出最少的路径,使得这些路径经过了所有的点. 由题意可得这是一个有向图,而路径不能相交,于是我们知道这是无向图的不相交最小路径覆盖问 ...

  10. Java面试题:多继承

    招聘和面试对开发经理来说是一个无尽头的工作,虽然有时你可以从HR这边获得一些帮助,但是最后还是得由你来拍板,或者就像另一篇文章"Java 面试题:写一个字符串的反转"所说: 面试开 ...