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

本文展示了如何使用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>

以上代码仅供参考,如不满足,可自行修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值