Top Pens Of 2013（098）—— Responsive progress meter

最新推荐文章于 2023-11-05 20:45:22 发布

why_su

最新推荐文章于 2023-11-05 20:45:22 发布

阅读量144

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/why_su/article/details/81697765

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2013年前100：https://codepen.io/2013/popular/pens/
第098：https://codepen.io/oliverturner/pen/fwpaF

学后有感：对于 html的 class的名字是自己随便命名的吗？

演示效果：
这里写图片描述
代码如下：
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Responsive progress meter</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="inline">
            <div class="progress-meter">
                <!--这个是 进度线-->
                <div class="track">
                   <span class="progress"></span>
                </div>
                <ol class="progress-points">
                    <li class="progress-point">
                        <span class="label">First Step</span>
                    </li>
                    <li class="progress-point">
                        <span class="label">Second Step</span>
                    </li>
                    <li class="progress-point">
                        <span class="label">Third Step</span>
                    </li>
                    <li class="progress-point">
                        <span class="label">Forth Step</span>
                    </li>
                    <li class="progress-point">
                        <span class="label">Last Step</span>
                    </li>
                </ol>
            </div>
        </div>


        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

style.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
 height: 100%;
}
body {
  font-size: 14px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
  position: absolute;
  top: 50%;
}

.progress-meter {
  margin: 20px auto 40px;
  padding: 40px;
}

.progress-meter .progress-point:before {
  content: "\2713";/* √ */
  display: block;
  width: 24px;
  margin: 0 auto 12px;
  text-align: center;
  border: 4px solid #aaaaaa;
  border-radius: 50%; /* 弄成圆形  */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: white; 
  box-shadow: 0 0 0 2px white; /* 阴影 */
  -moz-box-shadow: 0 0 0 2px white;
  -webkit-box-shadow: 0 0 0 2px white;
  color: white; /*隐藏  √ */ 
}
.progress-meter .track {
  position: relative;
  height: 4px;
  background: #ddd;
}

.progress-meter .progress {
    -moz-transition: width 1s;
  -o-transition: width 1s;
  -webkit-transition: width 1s;
  transition: width 1s;
   position: absolute;
   display: block;
   left: 0;
   top: 0;
   width: 0;
   height: 4px;
   background: red; 
}

.progress-meter .progress-points {
  position: relative;
  margin: -14px 0 0;
  padding: 0;
  list-style: none; 
}
.progress-meter .progress-points .progress-point:nth-child(1) {
  left: 0%;
}
.progress-meter .progress-points .progress-point:nth-child(2) {
  left: 25%;
}
.progress-meter .progress-points .progress-point:nth-child(3) {
  left: 50%;
}
.progress-meter .progress-points .progress-point:nth-child(4) {
  left: 75%;
}
.progress-meter .progress-points .progress-point:nth-child(5) {
  left: 100%;
}
.progress-meter .progress-point {
  position: absolute;
  cursor: pointer;
  width: 100px;
  text-align: center;
  margin-left: -50px;
  color: #999;
  transition: color 1s; /* color 属性变化时的渐变时间*/
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
}
.progress-meter .progress-point.completed, .progress-meter .progress-point.active {
  color: #777;  
}
.progress-meter .progress-point.completed:before {
  background-color: #777;   
}
.progress-meter .progress-point.active:before {
  /*延迟1s 等待 进度线 加载完成 */
 transition-delay: 1s;
 -moz-transition-delay: 1s;
 -o-transition-delay: 1s;
 -webkit-transition-delay: 1s;
}

index.js

(function(){
  var $points = $(".progress-points").first();
  var $point_arr = $(".progress-point");
  var $progress = $(".progress").first();
  var val = 4;
  var max = $point_arr.length - 1;
  var active = 0;

  function activate(index){
     if(index != active){
        active = index;
        var $_active = $point_arr.eq(active);
        $point_arr.removeClass('completed active')
          .slice(0, active).addClass('completed');
        $_active.addClass('active');
      return $progress.css('width', (index / max * 100) + "%");
     }
  }

  $points.on('click','li',function(event){
     var _index = $point_arr.index(this);
     activate(_index);
  });

}).call(this);/*避免变量冲突的写法*/

why_su

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Top Pens Of 2013（098）—— Responsive progress meter

2013年前100：https://codepen.io/2013/popular/pens/ 第098：https://codepen.io/oliverturner/pen/fwpaF学后有感：对于 html的 class的名字是自己随便命名的吗？演示效果：代码如下： index.html&lt;!DOCTYPE html&gt;&lt;html lang="...
复制链接

扫一扫