移动端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 ...
随机推荐
- Mybatis笔记五:Mybatis的全局配置文件Configuration.xml讲解
从 XML 中构建 SqlSessionFactory 每个基于Mybatis应用都是以一个SqlSessionFactory实例为中心.SqlSessionFactory实例可以由SqlSessio ...
- python之快速排序
快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...
- 基于centos系统安装pip模块
pip模块安装 centos 6.5安装pip,centos安装Python包管理安装工具pip的方法如下: 此安装包使用的是pip1.5.5版本 wget --no-check-certificat ...
- Hbase(一)基础知识
一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...
- 使用Hexo写博客
首先,你需要搭建一个Hexo博客网站- 使用Hexo搭建GitHub博客(2018年Mac版) 原生方式新建文章 Hexo的项目结构是在网站根目录的source/_posts目录下存放你的博客文档,以 ...
- Codeforces Round #338 (Div. 2) D 数学
D. Multipliers time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- C++模板类注意事项
最近使用C++模板,虽然工作几年了,但是模板用的很少,确切的说自己实现的机会很小. 昨天写了一个代码maxheap.h 中实现了类模板的声明,我将实现写在maxheap.cpp中, 当在main.cp ...
- Python之文件操作:os模块
Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是linux 或者 unix 2.o ...
- dp ZOJ 3956
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3956 Course Selection System Time Limit ...
- HDU 5213 分块 容斥
给出n个数,给出m个询问,询问 区间[l,r] [u,v],在两个区间内分别取一个数,两个的和为k的对数数量. $k<=2*N$,$n <= 30000$ 发现可以容斥简化一个询问.一个询 ...