基于jquery实现的可拖拽进度条，支持初始值和步长的定义

持續

于 2022-02-07 15:16:35 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mr_lijie/article/details/122809358

javascript 同时被 2 个专栏收录

6 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文展示了如何使用HTML、CSS和JavaScript实现一个可拖动的进度条组件。代码包括页面结构、样式定义以及触摸事件的处理，允许用户通过鼠标点击或滑动来调整进度条的值，并实时显示当前进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据项目需求自己进行了简单的封装，具体代码及效果截图如下：

效果
进度条效果图

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>
<body>
  <div class="progress">
    <div class="progress_bg">
        <div class="progress_bar"></div>
    </div>
    <div class="progress_btn"></div>
    <div class="text">0%</div>
</div>
</body>
</html>

CSS

<style>
    .progress{position: relative; width:300px;margin:100px auto;}
        .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
        .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
        .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
        left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
        .progress_btn:hover{border-color:#F7B824;}
  </style>

js

<script>
$(function () {
    setProgress(50, 30)
})
/**
 *  设置进度条位置
 *  initProgress 初始化值
 *  stepNum 步值，即每一步代表多少
 */
function setProgress (initProgress, stepNum) {
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').css('left', initProgress);
    $('.progress_bar').animate({width:initProgress},300);
    $('.text').html(parseInt((initProgress/300)*stepNum));
    $('.progress_btn').on('touchstart', function(e) {
        ox = e.originalEvent.targetTouches[0].pageX - left - initProgress;
        tag = true;
    });
    $(document).on('touchend',function() {
        tag = false;
    });
    $('.progress').on('touchmove', function(e) {//鼠标移动
        if (tag) {
            left = e.originalEvent.targetTouches[0].pageX - ox;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').width(left);
            $('.text').html(parseInt((left/300)*stepNum));
        }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
        if (!tag) {
            bgleft = $('.progress_bg').offset().left;
            left = e.pageX - bgleft;
            if (left <= 0) {
                left = 0;
            }else if (left > 300) {
                left = 300;
            }
            $('.progress_btn').css('left', left);
            $('.progress_bar').animate({width:left},300);
            $('.text').html(parseInt((left/300)*stepNum));
        }
    });
}
</script>