滑动进度条小插件

最新推荐文章于 2024-08-25 07:25:30 发布

liufang12

最新推荐文章于 2024-08-25 07:25:30 发布

阅读量2.8k

点赞数 1

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

本文链接：https://blog.csdn.net/liufang12/article/details/53130922

版权

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

摘要由CSDN通过智能技术生成

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

插件效果图如下：

这里写图片描述

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