码迷,mamicode.com
首页 > 其他好文 > 详细

模块代码之流程进度条1

时间:2016-06-24 18:44:54      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

效果如下:

技术分享

HTML结构代码:

 1 <div class="gb-progress">
 2     <dl>
 3         <dd class="selected">
 4             <h4>提交</h4>
 5         </dd>
 6         <dd class="selected">
 7             <h4>处理</h4>
 8         </dd>
 9         <dd>
10             <h4>完成</h4>
11         </dd>
12     </dl>
13 </div>

主要CSS代码:

 1 /*流程进度条*/
 2 .gb-progress {
 3     padding: 40px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin-top: 20px; 
 4     overflow: hidden; 
 5 }
 6 .gb-progress dl {
 7     position: relative; padding-top: 25px; 
 8 }
 9 .gb-progress dl::before {
10     content: ""; z-index: 9; position: absolute; top: 0; left: 17%; width: 0; height: 5px; background: #28c8fc;
11 }
12 .gb-progress dl::after {
13     content: ""; position: absolute; top: 0; left: 17%; width: 66.66%; height: 5px; background: #c8c8c8;
14 }
15 .gb-progress dl.len1::before {
16     width: 33.33%;
17 }
18 .gb-progress dl.len2::before {
19     width: 66.66%;
20 }
21 .gb-progress dd {
22     position: relative; float: left; width: 33.33%; text-align: center;
23 }
24 .gb-progress dd::after {
25     content: ""; z-index: 9; position: absolute; left: 50%; top: -35px; width: 25px; height: 25px; border-radius: 100%; background: #c8c8c8; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); transform: translate(-50%,0);
26 }
27 .gb-progress dd.selected::after {
28     background: #28c8fc;
29 }
30 .gb-progress dd * {
31     font-size: 24px; color: #8d8d8d; line-height: 2;
32 }
33 .gb-progress dd.selected h4 {
34     color: #28C8FC;
35 }

JS代码:

1 $(function(){
2     var pl = $(‘.gb-progress dl‘);
3     var index = pl.find(‘.selected‘).last().index();
4     pl.addClass(‘len‘+index);
5 });

 

上面主要思路,即灰色的长条由dl::after设置,为dd长度总和。绿色的长条样式由dl::before,其长度通过JS查找.selected然后添加对应的‘len‘+index。圆点由dd相同思路控制。

 

模块代码之流程进度条1

标签:

原文地址:http://www.cnblogs.com/shifan/p/5614951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!