JS实现移动端判断上拉和下滑功能
作者:静乐想 发布时间:2023-07-13 22:05:21
标签:js,移动端,上拉,下滑
一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。
二、js中距离:pageY、clientY、offsetY的区别:
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器,滚轮距离不算在内。
pageY:相对于浏览器,滚轮滚动的距离算在内;本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性,touchend有changedTouches属性,两个属性中分别有pageY、pageX信息。
//滑动处理
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
alert("无操作");
break;
case 1:
// 向上
alert("up");
break;
case 2:
// 向下
alert("down");
break;
default:
}
}, false);
四、
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
//var dx = endX - startX;
var result = 0;
if(dy>0) {//向上滑动
result=1;
}else if(dy<0){//向下滑动
result=2;
}
else
{
result=0;
}
return result;
}
总结
以上所述是小编给大家介绍的JS实现移动端判断上拉和下滑功能,希望对大家有所帮助
来源:http://blog.csdn.net/zhengyanan110/article/details/76804730
0
投稿
猜你喜欢
- 如何提高Request集合的使用效率?以加快程序处理速度: strTitle=Request.Form("Title&q
- 不知道大家在做页面的时候会不会遇到样式定义不生效的问题,基本的表现就是怎么改样式都没显示或只有某些浏览器正常,这时通常需要做下面的几步:确认
- 一位资深的设计师曾经向我抱怨,说老板不仅让他做“设计”工作,还让他做“制作”工作,真是很烦。言下之意,“制作”还要一个资深设计师亲自上阵,未
- 维护是什么,维护就是修改,不断的修改,但是要保证你的html和css有清晰的版本界定,有扩展性,不要因为做的太死而重新去做这个页面。一个赚钱
- 我见到有的网站好像可以把数据库的记录读到表格里去,是这样的吗?如何做到的?可能是这样的,因为我们确实能把数据库里的记录用表格来储存,看看下面
- 什么是deferdefer用来声明一个延迟函数,把这个函数放入到一个栈上, 当外部的包含方法return之前,返回参数到调用方法之前调用,也
- golang的单引号转义如题,golang中有时候需要将一个字符串中的单引号再转义一次,比如在两个单引号之间包含一个含有单引号的字符串的情形
- 随着CSS 框架的流行升温不断,前端er们也越来越关注CSS框架的使用,国内也有很多关于各种CSS框架的使用技巧和教程,彬Go一直关注着各种
- 树型结构在我们应用程序中还是很常见的,比如文件目录,BBS,权限设置,部门设置等。这些数据信息都采用层次型结构,而在我们现在的关系型数据库中
- asp之家注:对于ACCESS数据库中的NULL,经常我们直接判断该字段是否为空用的是:name="",但是这个还不够,
- 我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onch
- 在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基
- Javascript有没有内存泄露?如果有,如何避免?鉴于最近有好几个人问到我类似的问题,看来大家对这部分内容还没有系统的研究过,因此,打算
- 本文实例讲述了PHP实现从上往下打印二叉树的方法。分享给大家供大家参考,具体如下:问题从上往下打印出二叉树的每个节点,同层节点从左至右打印。
- 前言golang实现定时任务很简单,只须要简单几步代码即可以完成,最近在做了几个定时任务,想研究一下它内部是怎么实现的,所以将源码过了一遍,
- 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要。在网页
- PS笔刷,样式,形状、渐变、滤镜载入方式及使用:1、笔刷载入方式: 打开PS,编辑-->预设管理器-->载入-->然后点你
- 【原文地址】My "First Look at Orcas" Presentation 【原文发表日期】 Th
- 数据库:30万条,有ID列但无主键,在要搜索的“分类”字段上建有非聚集索引过程T-SQL: /* 用户自定义函数:执行时间在115
- 在良好的数据库设计基础上,能有效地使用索引是SQL Server取得高性能的基础,SQL Server采用基于代价的优化模型,它对每一个提交