移动端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 ...
随机推荐
- Django新手图文教程-转发
转发自:http://www.cnblogs.com/Leo_wl/p/5824541.html 一.Django简介 百度百科:开放源代码的Web应用框架,由Python语言编写...... 重点: ...
- listen() 函数
声明:本文来自网络博文的合并,文后有链接. 一.listen函数仅由TCP服务器调用 它做两件事: 1.当socket函数创建一个套接字时,它被假设为一个主动套接字,也就是说,它是一个将调用conne ...
- 洛谷 P4503 [CTSC2014]企鹅QQ 解题报告
P4503 [CTSC2014]企鹅QQ 题目背景 PenguinQQ是中国最大.最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志.群.即 ...
- Linux内核分析4
周子轩原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 使用库函数API和C代码 ...
- 【bzoj4571】美味
Portal -->bzoj4571 Solution emmm持续智力康复.. 虽然说因为统计的是加上\(x\)的跟\(b\)异或的最大值所以可持久化trie用不了了 但是按位贪心的思想还 ...
- python基础----元类metaclass
1 引子 class Foo: pass f1=Foo() #f1是通过Foo类实例化的对象 python中一切皆是对象,类本身也是一个对象,当使用关键字class的时候,python解释器在加载cl ...
- 【目标检测大集合】R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记
R-FCN.SSD.YOLO2.faster-rcnn和labelImg实验笔记 转自:https://ask.julyedu.com/question/7490 R-FCNpaper:https:/ ...
- HDU 6199 DP
gems gems gems Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- grafana模板
1.安静了这么久,换了一家公司,还有过年,去了上海,去了苏州,去了杭州,认识了一个人,跟老司机他们一起学k8s,所以很累很累,这是监控,也是在老司机的帮助下熟悉使用,3q!
- Patch multi versions of windows via Power shell
Patch multi versions of windows via Power shell $version = Get-WmiObject -Class Win32_OperatingSyste ...