jquery 可拖动进度条

原创

mob649e81597922 2024-09-07 07:01:09 ©著作权

文章标签 进度条 HTML jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81597922的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现 jQuery 可拖动进度条

在现代网页开发中，进度条是一项常用的 UI 元素。使用 jQuery，我们可以轻松地实现一个可拖动的进度条。在这篇文章中，我们将详细介绍实现这一功能的流程，以及每一步的具体代码。

一、实现流程

步骤	描述
1	创建 HTML 结构
2	添加 CSS 样式
3	引入 jQuery 库
4	实现拖动功能
5	更新进度条

二、详细步骤

1. 创建 HTML 结构

首先，我们需要创建一个简单的 HTML 文件，里面包含一个进度条和一个拖动的控制器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖动进度条</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-bar">
        <div class="progress"></div>
        <div class="handle"></div>
    </div>
    <script src="
    <script src="script.js"></script>
</body>
</html>

这里创建了包含类名为 progress-bar 的进度条以及两个子元素： progress（表示当前进度）和 handle（表示拖动的手柄）。

2. 添加 CSS 样式

接下来，我们来为进度条添加一些样式，以便在页面中展示良好效果。

/* style.css */
body {
    font-family: Arial, sans-serif;
}

.progress-bar {
    width: 500px;
    height: 30px;
    background: #efefef;
    position: relative;
    margin: 50px auto;
}

.progress {
    height: 100%;
    background: #76c7c0;
    width: 0; /* 初始进度为 0% */
}

.handle {
    width: 20px;
    height: 30px;
    background: #3cba54;
    position: absolute;
    top: 0;
    cursor: pointer;
    left: 0; /* 手柄位于进度条的起始位置 */
}

上述 CSS 代码为进度条及其手柄设置了样式，包括宽度、高度及背景颜色。

3. 引入 jQuery 库

请确保在 HTML 文件中引入 jQuery 库，这样我们才能使用 jQuery 的功能。

<script src="

这行代码已经在上面的 HTML 结构中包含。

4. 实现拖动功能

接下来，我们使用 jQuery 编写拖动功能的代码。在 script.js 文件中添加以下代码：

// script.js
$(function() {
    let $handle = $('.handle');
    let $progress = $('.progress');
    let $progressBar = $('.progress-bar');

    $handle.on('mousedown', function(event) {
        let barOffset = $progressBar.offset().left; // 获取进度条的左边界
        let barWidth = $progressBar.width(); // 获取进度条的宽度

        $(document).on('mousemove', function(e) {
            let mousePosition = e.pageX - barOffset; // 计算鼠标相对进度条的位置
            if (mousePosition < 0) {
                mousePosition = 0; // 限制最小值
            } else if (mousePosition > barWidth) {
                mousePosition = barWidth; // 限制最大值
            }
            $handle.css('left', mousePosition + 'px'); // 更新手柄位置
            $progress.width(mousePosition); // 更新进度条的宽度
        });

        $(document).on('mouseup', function() {
            $(document).off('mousemove'); // 移除鼠标移动事件
        });
    });
});

此段代码实现了以下几个功能：

在按住手柄（mousedown）的时候，获取进度条位置和宽度。
当鼠标移动（mousemove）时，计算鼠标在进度条中的位置，并更新手柄和进度条的宽度。
释放鼠标（mouseup）时，移除移动事件。

5. 更新进度条

每次拖动手柄时，进度条都会更新，我们已经在上述代码中实现了这一功能。

三、类图

以下是类图的简单表示，使用 Mermaid 语法绘制：

classDiagram
    class ProgressBar {
        +width: int
        +height: int
        +setProgress(value: float)
    }
    class Handle {
        +position: int
        +drag()
    }
    class Progress {
        +currentWidth: int
        +updateWidth(value: int)
    }