文章/答案/技术大牛

发布

jquery 左右拖动进度条

基础概念： jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。左右拖动进度条通常涉及到使用 jQuery 来监听鼠标事件，并动态地改变元素的宽度或位置来表示进度的变化。

优势：

简化代码：jQuery 提供了丰富的 API，使得 DOM 操作、事件绑定等任务变得更加简单。
跨浏览器兼容性：jQuery 内部处理了大部分浏览器之间的差异，使得开发者无需担心兼容性问题。
丰富的插件生态：有大量的第三方插件可供使用，如 jQuery UI，它提供了拖拽功能等。

类型：

基于 HTML 和 CSS 的进度条：通过修改元素的宽度来实现进度显示。
基于 Canvas 或 SVG 的进度条：利用图形绘制能力创建更复杂的视觉效果。

应用场景：

文件上传进度：显示文件上传的实时进度。
数据加载指示：在页面加载数据时提供进度反馈。
媒体播放控制：在音频或视频播放器中显示播放进度。

示例代码：以下是一个简单的基于 jQuery 的左右拖动进度条示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 拖动进度条</title>
    <style>
        #progressBar {
            width: 300px;
            height: 20px;
            background-color: #ddd;
        }
        #progress {
            width: 0%;
            height: 100%;
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <div id="progressBar">
        <div id="progress"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var isDragging = false;
            var startX, startWidth;

            $('#progressBar').on('mousedown', function(e) {
                isDragging = true;
                startX = e.pageX;
                startWidth = $('#progress').width();
            });

            $(document).on('mousemove', function(e) {
                if (!isDragging) return;
                var offsetX = e.pageX - startX;
                var newWidth = Math.max(0, Math.min(startWidth + offsetX, 300));
                $('#progress').width(newWidth + '%');
            });

            $(document).on('mouseup', function() {
                isDragging = false;
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法：

进度条跳动或不流畅：可能是由于 mousemove 事件触发过于频繁导致的。可以通过设置一个定时器来减少更新的频率，或者在 mousemove 事件处理函数中使用 requestAnimationFrame 来优化动画效果。
边界处理不当：进度条可能会超出其容器的边界。在设置新宽度时，应确保它不超过容器的最大宽度，并且不小于0。
兼容性问题：在不同的浏览器中可能会有不同的表现。确保测试在主流浏览器中的兼容性，并使用 jQuery 的跨浏览器兼容性特性来处理差异。

以上示例代码提供了一个基本的拖动进度条实现，但在实际应用中可能需要根据具体需求进行调整和优化。

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

有帮助

没帮助

是否为每个可拖动对象设置jQuery拖动事件？

、

在一个有十几个左右可拖动的div的jQuery重型tell应用程序中，是否可以告诉jQuery每个可拖动的div都应该有相同的拖动事件，而不是分别手动添加相同的拖动事件？

浏览 2提问于2012-06-22得票数 0

回答已采纳

1回答

如何修正AVI索引错误

、、、

我选择是，它开始固定AVI指数，并存在时，维修进度条达到20%左右。然后，视频开始播放，停止的时间远远早于它应该完成的时间。现在整个AVI文件可以自始至终播放，但是在VLC播放器和图腾播放器中可以拖动播放进度条是不可能的。所以，我想知道如何修复AVI索引错误，或者至少在GMplayer中拖动播放进度条？谢谢和问候！

浏览 0提问于2011-03-13得票数 4

4回答

水平进度条

、

在html和jQuery中，如何显示多个水平进度条？我有一个上课的想法。学生对主题进行投票，当他们投票时，进度条左右移动。我会让页面每隔15秒左右自动刷新一次。

浏览 2提问于2010-02-09得票数 0

回答已采纳

2回答

如何通过拖动图像来调整div的大小？

、、、

如何在拖动图像时调整div的大小？这是一个动态网址：谢谢

浏览 2提问于2014-05-27得票数 2

1回答

如何在鼠标拖动操作时重新设置jQuery进度条？

、、、

我已经在我的网站上安装了光滑的旋转木马，以及一些我为一个漂亮的进度条找到的代码。但是，尽管进度条在单击“以前”和“下一步”按钮时重置，但当滑块被拖动时，它不会重置。我玩过jQuery事件，但找不到适合点击和拖动的事件。我的站点是，这里是jQuery代码：$(document).ready(function() { var $bar, $slick,

浏览 1提问于2018-10-27得票数 1

回答已采纳

2回答

php的实时进度条实现

、、、

执行需要很长时间(1-2分钟).how，我可以创建进度条，并在第一页显示进度百分比。我可以计算进度百分比，但如何在第一页实时显示。

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

回答已采纳

1回答

进度栏平滑填充徽标(jQuery)

、、

我想要一个进度条，流畅加载从0-100%在10秒左右。最重要的是，我希望进度条是我的徽标的灰色版本(徽标是纯文本，但非网页文本)，它是慢慢填充的颜色，如进度条，到100%。在jQuery中有什么方法可以做到这一点吗？或者我必须在Flash中制作一些东西？谢谢!

浏览 2提问于2012-08-31得票数 0

1回答

jquery ui停止时可拖动的减速

、

我是用jquery的ui draggable做的，拖动一个div左右。在阻力停止后，平滑地减轻阻力的最好方法是什么？假设拖拽突然停止。谢谢

浏览 1提问于2011-07-07得票数 2

回答已采纳

1回答

带有进度条类型填充的jQuery滑块

、、

我希望实现jQuery UI，这样当您拖动手柄时，滑块条就会用颜色填充条的一侧，有点像进度条。有没有人能给我一些建议，告诉我如何解决这个问题？提前谢谢你。

浏览 0提问于2009-06-27得票数 6

回答已采纳

1回答

如何在滑块中动画化进度条

、、、

我使用jQuery创建了一个滑块。我的照片滑块上有一个缩略图和标题。图片缩略图下方有一个进度条，位于标题和照片之间的中间。# Photo# Caption 目前进度条的宽度为X。当我把滑块拖到左边的时候，宽度会增加，

浏览 1提问于2017-10-06得票数 1

2回答

jquery文件上载进度条不准确

、、

我使用的是jquery文件上传()插件。data.loaded / data.total * 100, 10);});为什么它会这样呢？我如何修复它才能正确显示进度？谢谢。

浏览 0提问于2014-03-24得票数 4

1回答

我为一个客户的网站创建了一个水平画廊，它的功能相当好，不是画廊的最佳方式，但这正是他们想要的： #galleryWrapper {width: 100%;padding: 10px 0px 10px 0px;white-space: nowrap;overflow-x: scroll;他们报告说，从左向右滚动这些图像有点困难，部分原因是因为div中没有滚动条。我需要关于如何添加滚动条而不必更改为使用iFr

浏览 2提问于2014-03-20得票数 0

回答已采纳

1回答

如何在Android上单独控制耳机的左右声道？

、

有人知道如何在Android上单独控制耳机的左右声道吗？让我澄清一下我的问题:我想在左右声道播放不同的声音。不仅可以控制它的音量。

浏览 5提问于2011-11-22得票数 1

回答已采纳

2回答

JQuery e.offsetX跳跃值问题

、

我正在编写一个视频进度条，它应该具有查找(拖动或单击查找)的能力，而我正在处理的问题相当混乱，并且与进度条的拖动功能有关。当拖动进度滴答器时，它将从鼠标的位置移动到进度条的开始，而不是保持它靠近鼠标位置的正确位置。这个问题的一个演示是可用的。

浏览 0提问于2014-04-08得票数 5

回答已采纳

2回答

jQuery进度条宽度和数字动画不光滑

、、、、

我正在尝试编写jQuery函数，这将使进度条的宽度从0%动画到XY%，同时，它还会增加数字(也从0%到XY%)。/2.1.1/jquery.min.js"></script><html> <script src="http://code.jquery.com/jquery-git.js"><&#

浏览 4提问于2017-08-03得票数 0

回答已采纳

3回答