/*判断上下滑动:*/
$('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判断页面滑动方向的更多相关文章

  1. jquery判断手指滑动方向

    jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...

  2. jquery 判断手势滑动方向(上下左右)

    $('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...

  3. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  4. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  5. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  6. jquery判断页面网址是否有效

    方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...

  7. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  8. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  9. 第四篇:web之前端之jquery

    前端之jquery   前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...

随机推荐

  1. (转)android系统架构及源码目录结构

    转自:http://blog.csdn.net/finewind/article/details/46324507 1. Android系统架构: android系统架构采用了分层架构的思想,如下图所 ...

  2. TCDB 数据库简介

    TCDB是对膜转运蛋白(Membrane Transport Protein)进行分类的一个数据库,它制定了一套转运蛋白分类系统(Transporter Classification), 简称TC S ...

  3. R语言ggplot2-labs 函数

    labs 函数主要有以下三个用途: 1) 设置图片的标题(title), 子标题(subtitle), 引用(caption) 代码示例: ggplot(mtcars, aes(mpg, wt, co ...

  4. springBoot配置文件application.properties

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  5. POI-PPT官方文档

    注意 请注意,XSLF仍然处于早期开发阶段,并且将来会在发行版中发生不兼容的更改. 特征索引 创建新的演示文稿 阅读现有演示文稿 使用预定义的布局创建幻灯片 删除幻灯片 重新订购幻灯片 更改幻灯片大小 ...

  6. 关于jq ajax封装以及ajax上传Webapi

    jq的ajax完整版本 $(function () {     fileChange(); }); function fileChange() {     $('#fileinput').change ...

  7. 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 ...

  8. 解决ESXi有虚拟机模版部署的CentOS虚拟机,网卡eth0找不到问题

    1,问题和虚拟机克隆后出现网卡找不到问题类似. 2,修改主机名hostname 修改 /etc/sysconfig/network文件 3,删除/etc/sysconfig/network-scrip ...

  9. Objective-C语法之NSSortDescriptor

    main.m #import <Foundation/Foundation.h> #import "Person.h" /** NSSortDescriptor 可以实 ...

  10. mongodb可视化工具连接报错

    failed to get address info 这时候注意看一下 IP地址是不是加了http了,如果加了一定要去掉.IP地址是不加http的.去掉就能正常连接了.