jquery 获取滑动距离

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在移动设备上，获取滑动距离通常涉及到触摸事件（touch events），这些事件提供了关于触摸点的详细信息，包括位置、移动距离和时间。

类型

获取滑动距离可以通过监听触摸事件来实现，主要包括以下几种类型：

touchstart：当手指触摸屏幕时触发。
touchmove：当手指在屏幕上滑动时触发。
touchend：当手指离开屏幕时触发。

应用场景

移动应用：在移动应用中，滑动距离可以用于实现滚动、拖动、缩放等交互效果。
游戏开发：在游戏中，滑动距离可以用于控制角色移动或触发特定动作。
数据可视化：在数据可视化应用中，滑动距离可以用于平移图表或缩放视图。

示例代码

以下是一个使用 jQuery 获取滑动距离的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动距离示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="touchArea" style="width: 100%; height: 300px; background-color: lightgray;">
        滑动这里
    </div>
    <p id="distance">滑动距离: 0px</p>

    <script>
        $(document).ready(function() {
            let startX, startY, endX, endY;

            $('#touchArea').on('touchstart', function(event) {
                event.preventDefault();
                startX = event.originalEvent.touches[0].pageX;
                startY = event.originalEvent.touches[0].pageY;
            });

            $('#touchArea').on('touchend', function(event) {
                event.preventDefault();
                endX = event.originalEvent.changedTouches[0].pageX;
                endY = event.originalEvent.changedTouches[0].pageY;
                let deltaX = endX - startX;
                let deltaY = endY - startY;
                $('#distance').text('滑动距离: ' + Math.sqrt(deltaX * deltaX + deltaY * deltaY) + 'px');
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

触摸事件不触发：
- 确保在移动设备上测试，并且浏览器支持触摸事件。
- 使用 event.preventDefault() 阻止默认行为，如滚动。

滑动距离计算不准确：
- 确保在 touchstart 和 touchend 事件中正确获取触摸点的坐标。
- 使用 Math.sqrt(deltaX * deltaX + deltaY * deltaY) 计算滑动距离的直线距离。
浏览器兼容性问题：
- 使用 jQuery 处理不同浏览器之间的差异。
- 确保在所有目标浏览器上进行测试。

通过以上方法，可以有效地获取和处理滑动距离，实现丰富的交互效果。

页面内容是否对你有帮助？

有帮助

没帮助

使div高度达到向下滑动的距离

、、、

我试图逐渐显示一个div，因为滑动事件发生在身体上。 $('header, #header, [role="banner"]').css('height', distance);但是，上面提到的不只是将距离设定在滑动结束的地方吗当<em

浏览 1提问于2013-11-02得票数 0

1回答

我想使用名为"jCarousel Lite“()的jQuery插件构建一个旋转木马幻灯片。我已经把它启动并运行了。到目前为止，使用jQuery，我已经成功地构建了这样一个展开按钮。问题是，“下一步”和“上一步”按钮仍然只滑动第一次初始化轮播时定义的距离。显然，这些需要滑动更长的距离，现在宽度更宽了。因此，本质上，我需要的是关于如何在轮播首次初始化后更改“下一步”和“上一步”按钮滑动距离的信息。

浏览 2提问于2010-08-25得票数 1

1回答

如何使用jquery Show()方法显示图像的百分比

、、、、

我正在尝试创建相同的良好效果和覆盖箭头(即桌面版的chrome)，当你向左或向右滑动移动浏览器。我使用javascript和jQuery，现在我可以在滑动时显示箭头。我设法获得了滑动的距离，但我找不到将两者联系起来的方法，所以我只显示了箭头与距离相关的一部分！

浏览 3提问于2013-01-18得票数 0

2回答

TouchSwipe距离复位

、、、、

("+distance+"px)"; }有什么办法解决这个问题吗?我错过了什么？我正在使用JQuery和TouchSwipe插件：编辑:更改到jsfiddle的链接

浏览 2提问于2016-11-25得票数 2

回答已采纳

3回答

在jQuery-mobile中计算滑动距离

我希望你今天身体好，我正在计算一个手机网站的滑动距离(一个触摸手势)，你如何计算出用户在屏幕上滑动了多少像素？

浏览 1提问于2011-08-03得票数 8

回答已采纳

1回答

CABasicAnimation的应用速度和旋转次数

、、、

我想根据用户在该视图上的触摸和滑动来旋转视图。我希望视图一开始旋转得更快，然后减速，最后停止。请分享你对如何解决这个问题的想法？

浏览 7提问于2011-04-19得票数 0

1回答

在iPhone/iPad/触摸屏上jQuery拖拽与滑动手势逻辑

、、、

基本上，我需要一些逻辑来决定这一点：有没有可能..。另外，现在触摸插件的标准是什么(jQuery移动、各种插件或触摸事件到jQuery事件的映射…… 对不起，我还不够聪明，不能解决这个问题：

浏览 0提问于2011-10-16得票数 2

2回答

水平滚动-移动-滑动？

、、、

有没有人能推荐一下使用swipe手势触发水平Jquery滚动条的最好方法？感谢收到的任何建议或备选版本。干杯保罗

浏览 0提问于2011-09-08得票数 10

回答已采纳

3回答

如何使用jQuery手机滑动事件获取方向和距离

、、、

在使用jQuery手机刷卡事件时，是否可以在回调函数中获取方向和距离？我在里什么也没找到。移动端是一个很好的选择，但是我需要jQuery 的tap事件，并且我不想包含两个库。

浏览 2提问于2013-05-07得票数 6

回答已采纳

1回答

如何创建像iPhone天气应用程序这样的列表，在其中可以横向拖动元素并显示控件？

、、、、

在许多应用程序中，比如iPhone天气应用程序，列表都是垂直显示的多个div，每个div可以在短距离内滑动，显示一个删除按钮。如果点击了delete按钮，元素就消失了，用户也可以点击其他地方，这样div就会向后滑动。我在谷歌上搜索了一天，却找不到一个例子。当然，看看jQuery和Bootstrap的搜索术语。

浏览 3提问于2022-11-25得票数 -2

1回答

在面板中滑动到视图中

、、、

我正在尝试开发一个在面板中的滑动，当用户在身体上滑动的时候，它可以滑动到视图中，在身体上。当我减少100到50或更少，它来得太快，感觉不成比例的滑动距离。风格发生后，刷是完成。当滑动正在发生时，我如何设置面板#panel的样式？我将非常感谢所有的帮助，让这个#panel进入视野，因为身体正被滑动到右边。

浏览 3提问于2013-11-19得票数 0

回答已采纳

1回答

在特定差异/边距后停止jQueryUI滑块

、、、、

我有一个空白，或者我们可以说一个特定的距离改变了HTML选择选项标签在未来动态..。我已经创建了一个范围滑翔机与。jQuery range: true,

浏览 2提问于2014-07-19得票数 0

回答已采纳

3回答

Swift -如何检测滑动手势距离以放弃？

、、、

Instagram如何处理向后滑动时的滑动手势距离(弹出导航过程)。例如，如果不是长距离，您可以放弃向后滑动，然后再次返回旧视图。我想知道这一点，如果有人解释一下就太好了。

浏览 3提问于2016-10-01得票数 1

1回答

在jQuery中滑动三维旋转木马

、、、

我用jQuery和CSS3创建了一个3D旋转木马。是我的代码。现在，我想在我的代码中添加滑动支持。我知道有一个。用户可能会慢慢地滑动，我希望旋转木马开始慢慢旋转，就用用户的手指(或鼠标)。我可以使用一个库()来检测快速滑动，设置时间和距离阈值，但是如何检测缓慢的滑动，以及如何将这种效果添加到我的旋转木马中？

浏览 0提问于2012-08-07得票数 1

1回答

反向JQuery距离滑动器处理程序

、、、

* JQuery单击处理程序以反转值* e.preventDefault(); sliderElement.slider

浏览 0提问于2019-05-28得票数 1

回答已采纳

1回答

不带jQuery的Ion RangeSlider

、、、、

有没有可能在没有jQuery的情况下得到一个离子距离滑动器？下面的脚本在我的网站上导致了问题，菜单的一部分专门用于用户。 <!-jQuery-> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> 我尝试按照下面的引用删

浏览 10提问于2021-07-21得票数 0

回答已采纳

1回答

如何使用倒角匹配算法寻找“相似图像”

、、、

我想问更多关于如何使用倒角匹配算法(一种边缘匹配算法)来寻找“相似”图像的信息。我想知道是否有可能对匹配的结果进行“评分”。

浏览 1提问于2010-08-09得票数 14

回答已采纳

1回答

如何使用手势检测器以及如何创建可拖动的顶部栏

、

如何隐藏上面的容器，并在滑动时获取容器，如下所示：如何在滑动结束后执行某些操作并测量滑动距离。顶端的横杆应该固定或向上，而不是停留在两者之间。我如何使它具有动画效果，使其与现在的效果相似。

浏览 1提问于2019-04-04得票数 1

1回答

无法使用android或iPad中的touchswipe插件获取滑动方向和距离

、、、

在网站上使用名为touchswipe ( )的jQuery插件，主要用于桌面和一些移动设备，如galaxy tab或iPad，用于页面第三栏的左右滑动。使用html和jQuery创建的我的页面的链接如下：然而，当swipe的事件被触发时，距离和方向都是空的。Touchswipe站点上的演示似乎与类似的代码一起工作得很好。

浏览 1提问于2011-08-03得票数 0

回答已采纳

4回答