web移动前端页面,jquery判断页面滑动方向
/*判断上下滑动:*/
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove",function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
console.log('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
console.log('往左滑动');
}else
if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
console.log('往上滑动');
} else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
console.log('往下滑动'); }
});
web移动前端页面,jquery判断页面滑动方向的更多相关文章
- jquery判断手指滑动方向
jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...
- jquery 判断手势滑动方向(上下左右)
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery判断页面网址是否有效
方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jquery判断页面元素是否存在
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- 第四篇:web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
随机推荐
- (转)android系统架构及源码目录结构
转自:http://blog.csdn.net/finewind/article/details/46324507 1. Android系统架构: android系统架构采用了分层架构的思想,如下图所 ...
- TCDB 数据库简介
TCDB是对膜转运蛋白(Membrane Transport Protein)进行分类的一个数据库,它制定了一套转运蛋白分类系统(Transporter Classification), 简称TC S ...
- R语言ggplot2-labs 函数
labs 函数主要有以下三个用途: 1) 设置图片的标题(title), 子标题(subtitle), 引用(caption) 代码示例: ggplot(mtcars, aes(mpg, wt, co ...
- springBoot配置文件application.properties
# =================================================================== # COMMON SPRING BOOT PROPERTIE ...
- POI-PPT官方文档
注意 请注意,XSLF仍然处于早期开发阶段,并且将来会在发行版中发生不兼容的更改. 特征索引 创建新的演示文稿 阅读现有演示文稿 使用预定义的布局创建幻灯片 删除幻灯片 重新订购幻灯片 更改幻灯片大小 ...
- 关于jq ajax封装以及ajax上传Webapi
jq的ajax完整版本 $(function () { fileChange(); }); function fileChange() { $('#fileinput').change ...
- Scala2.11.8 spark2.3.1 mongodb connector 2.3.0
import java.sql.DriverManager import com.mongodb.spark._ import org.apache.spark.SparkConf import or ...
- 解决ESXi有虚拟机模版部署的CentOS虚拟机,网卡eth0找不到问题
1,问题和虚拟机克隆后出现网卡找不到问题类似. 2,修改主机名hostname 修改 /etc/sysconfig/network文件 3,删除/etc/sysconfig/network-scrip ...
- Objective-C语法之NSSortDescriptor
main.m #import <Foundation/Foundation.h> #import "Person.h" /** NSSortDescriptor 可以实 ...
- mongodb可视化工具连接报错
failed to get address info 这时候注意看一下 IP地址是不是加了http了,如果加了一定要去掉.IP地址是不加http的.去掉就能正常连接了.