滑动进度条小插件

最新推荐文章于 2025-05-23 15:45:52 发布

liufang12

最新推荐文章于 2025-05-23 15:45:52 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js jQuery 文章标签：插件 javascript

本文链接：https://blog.youkuaiyun.com/liufang12/article/details/53130922

jQuery 同时被 2 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一个滑动进度条小插件，具备设置进度、滑动操作、显示进度名称及自定义颜色等功能。附带了Html、Css和Js代码示例。

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

功能：
１．可对进度条进行设置，
２．可滑动进度条，
４．可设置进度条名
５．可修改其颜色．

插件效果图如下：

这里写图片描述

Html代码如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
   <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
   <script src="bar3.js"></script>
   <link rel="stylesheet" type="text/css" href="bar.css">
</head>
<body>
    <div class="dis"></div>
    <div id="dis2"></div>
</body>
<script type="text/javascript">
  $('.dis').createBar();
  $('#dis2').createBar({
    color: '#ff5f71', 
    value: 20, 
    name: '男生'
  });
  console.log($('.dis').GetValue());
</script>
</html>

Css代码如下：

.progress-box{
    width: 500px;
    padding: 15px;
}
.progress-box .progress-bar-box{
    height: 8px;
    overflow: inherit;
    border-radius: 5px;
    background: #dddee0;
    width: 465px;
    margin-left: 0px;
}
.progress-box .progress-bar-box .bar-scroll{

}
.progress-box .progress-bar-box .bar-scroll-box{
    background-color: #009ddd;
    position: relative;
    border-radius: 5px;
    width: 20%;
    height: 8px;
}
.progress-box .progress-bar-box .bar-scroll-box .bar-mark{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: -6px;
    right: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    box-shadow: 0px 1px 10px #dadada;
}
.progress-box .progress-bar-box .bar-scroll-box .bar-info{
    position: absolute;
    z-index: 1070;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    visibility: visible;
    filter: alpha(opacity=0);
    padding: 5px 5px;
    margin-top: -3px;
    color: #fff;
    right: -39px;
    top: -37px;
    min-width: 75px;
}
.progress-box .progress-bar-box .bar-scroll-box .bar-info .info-arrow{
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #009ddd;
}
.progress-box .progress-bar-box .bar-scroll-box .bar-info .info-inner{
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    background: #009ddd;
}

.content-box .intro-box .intro-form-box .form-horizontal .sex-box{
    margin-bottom: 10px;
}
.sex-box .progress{
    height: 8px;
    overflow: inherit;
    border-radius: 5px;
    background: #dddee0;
    width: 465px;
    margin-left: 0px;
}
.sex-box .progress-bar{
    position: relative;
    border-radius: 5px;
}
.sex-box .progress-bar-info{
    background-color: #009ddd;
}
.sex-box .progress-bar-danger{
    background-color: #ff5f71;
}
.sex-box .progress-flag{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: -6px;
    right: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    box-shadow: 0px 1px 10px #dadada;
}
.sex-box .boy-box .tooltip.top{
    color: #fff;
    right: -32px;
    top: -37px;
}
.sex-box .boy-box .tooltip.top .tooltip-arrow{
    border-top-color: #009ddd;
}
.sex-box .boy-box .tooltip.top .tooltip-inner{
    background: #009ddd;
}
.sex-box .girl-box .tooltip.top{
    color: #fff;
    right: -32px;
    top: -37px;
}
.sex-box .girl-box .tooltip.top .tooltip-arrow{
    border-top-color: #ff5f71;
}
.sex-box .girl-box .tooltip.top .tooltip-inner{
    background: #ff5f71;

}

Js代码如下：

/*
    createBar：创建进度条
        defaluValue：进度条默认参数
            color：进度条颜色，标签颜色
            width：进度条进度
            name：标签名称
    SetColor：设置颜色
    GetValue：获取进度
    SetValue：设置进度
    ScrollBarEvent: 滑动进度条
*/
(function ($) {
    $.fn.extend({
        createBar: function(options) {
            var defaultValue = { //默认参数
                color: '#009ddd',
                value: 0,
                name: '女生'
            };
            if (options != undefined) {  //有参数
                $.each(options, function(n, val) {
                    if (n != null) {
                        defaultValue[n] = val;
                    }
                });
            }
            var $this = $(this);
            $this.append('<div style="margin-top: 50px; margin-left: 50px;">'
                +'<div class="progress-box">'
                    +'<div class="progress-bar-box">'
                        +'<div class="bar-scroll-box" data-width="'+ defaultValue['value'] +'">'
                            +'<span class="bar-mark"></span>'
                            +'<div class="bar-info">'
                                +'<div class="info-arrow"></div>'
                                +'<div class="info-inner">'
                                    +''+ defaultValue['name'] +'：<span>'+defaultValue['value'] +'</span>%'
                                +'</div>'
                            +'</div>'
                        +'</div>'
                    +'</div>'
                +'</div>'
                +'<span class="pro-info"></span>'
            +'</div>');
            this.SetColor($this, defaultValue['color']);
            this.SetValue($this, defaultValue['value']);
            this.ScrollBarEvent($this);
        },
        SetColor: function($box, color) {
            $box.find('.bar-scroll-box').css('background-color', color);
            $box.find('.info-inner').css('background-color', color);
            $box.find('.info-arrow').css('border-top-color', color);
        },
        GetValue: function($box) {
            var $this = $(this);
            this.currentX = $this.find(".bar-scroll-box").data('width');
            return this.currentX;
        },
        SetValue: function ($box, index) { /*设置进度条的的宽度*/
            var $bar = $box.find('.bar-scroll-box');
            if (index === undefined) {　//没有参数
                index = $bar.data('width');
            }
            $bar.css('width', index +'%');
            $bar.attr('data-width', index);
            $bar.find('.info-inner').find('span').html(index);
        },
        ScrollBarEvent: function($box) {
            var thisVal = this;
            var $par = $box.find('.progress-box');
            var barLeft = $par.offset().left; //进度条的开始点位置;
            var barWidth = $par.find('.progress-bar-box').width(); //进度条宽度;
            var scale = barWidth / 100;
            var barRight = barLeft + barWidth; //进度条的结束点位置;
            $box.find(".bar-mark").on('mousedown', function () {
                $box.find('.progress-box').on('mousemove', function (event) {
                    var changeX = event.clientX; //每次移动1px;
                    var currentValue = event.clientX - barLeft; //当前移动的位置
                    if (changeX >= barLeft && changeX <= barRight){
                        currentValue = currentValue /scale;
                        thisVal.SetValue($box, Math.round(currentValue));
                    }       
                }); 
            });
            $(document.body).mouseup(function () {
                $box.find('.progress-box').off('mousemove');
            });
        }
    });
}(jQuery));