JS实现移动端判断上拉和下滑功能
2017-08-07 15:55
483 查看
一、手指触屏,利用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实现移动端判断上拉和下滑功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- JS实现的判断方法、变量是否存在功能示例
- JS简单实现移动端日历功能示例
- dropload.js实现下滑加载更多分页功能
- JS-移动端判断上拉和下滑
- Vue.js实现移动端短信验证码功能
- 原生js实现移动端的视频播放可拖拽小窗功能,点击小窗返回到原始页面
- 基于JS实现移动端左滑删除功能
- JS实现移动端触屏拖拽功能
- clipboard.js 实现移动端和pc端复制到剪贴板功能
- 基于JS实现移动端向左滑动出现删除按钮功能
- 移动端,JS判断滑到页面顶部下滑进行操作
- 基于JS实现移动端左滑删除功能
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- js实现input类select功能
- js实现页面右键自定义功能
- JS实现Web中指定内容的保存与打印功能
- js实现reqire中的amd,cmd功能
- 移动端按住说话功能实现
- js判断ie版本号的简单实现代码
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能