分享好友 教程首页 教程搜索 频道列表

H5移动端,判断滑动方向

2022-01-12 23:432310
+关注2
核心提示:看代码

直接上JS代码

var windowHeight = $(window).height();
$("body").css("height", windowHeight);
var startX, startY, moveEndX, moveEndY, X, Y;
$("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 > 0) {
        console.log("left to right");
    } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        console.log("right to left");
    } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        console.log("top to bottom");
    } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        console.log("bottom to top");
    } else {
        console.log("just touch");
    }
});


本文标签: #滑动
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

用swiper做手机端滑动导航栏

    用代码测试

网络转载 JavaScript教程2022-05-25

关于touchslider.js滑动切换页面的使用

    需用代码测试

网络转载 移动端模板制作2022-03-19

jQuery下拉菜单滑动效果

    是不是非常的顺滑呢?鼠标移动到目标上自动的下拉菜单

网络转载 JS相关 12021-12-22

jquery实现滑动楼梯效果

    jquery实现滑动楼梯效果的具体代码,供大家参考,具体内容如下思路:鼠标滚动的时候页面跟随变化,点击模块时候,实现指哪打哪效果1.html和css代码htmlheadmetacharset=UTF-8title/titlestyletype=text/cssbody,ul,l

网络转载 JS相关2021-12-22

swiper禁止手动滑动

    swiper禁止手动滑动只需要在最外层的容器上增加class=swiper-no-swiping(在引入了swiper相关css的前提下)

小黑 web前端开发2021-06-19

下一篇
我来说两句
抢沙发