前两天在知乎上看到有人问这种进度条的做法,就自己写了写。
百度了才知道设置float后要给子元素设置position为absolute或者relative才能使z-index有效。在css和jquery上都是有收获的。
下面是代码,一开始设置display为fixed是我想提醒一下自己到实际应用中进度条都是fix在浏览器窗口上方的~~~
另外,多次使用!important改变css优先级是不是不推荐的做法呢?改进方案有哪些呢?看来还是有很多东西需要改进。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#panel *{
margin: 0;
padding: 0;
display: fixed;
}
.ball{
height: 20px;
width: 20px;
background-color: gray;
border-radius: 10px;
float: left;
}
.line{
margin-top: 6px !important;
margin-left: -2px !important;
margin-right: -2px !important;
height: 8px;
width: 104px;
background-color: gray;
float: left;
}
.smallBall{
margin: 4px !important;
display: none;
height: 12px;
width: 12px;
border-radius: 6px;
background-color: green;
}
.circle{
margin: 2.5px !important;
height: 6px;
width: 6px;
border:4px solid green;
background-color: white;
display: block;
}
.smallLine{
margin-top: 2px !important;
margin-left: -6px !important;
margin-right: -6px !important;
width: 0;
height: 4px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<div id="panel">
<div class="ball"><div class="smallBall circle"></div></div>
<div class="line"><div class="smallLine"></div></div>
<div class="ball"><div class="smallBall"></div></div>
<div class="line"><div class="smallLine"></div></div>
<div class="ball"><div class="smallBall"></div></div>
<div class="line"><div class="smallLine"></div></div>
<div class="ball"><div class="smallBall"></div></div>
<div class="line"><div class="smallLine"></div></div>
<div class="ball"><div class="smallBall"></div></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(".ball").css("display","block");
$(".ball").click(function(){
var $smallBall = $(this).children(".smallBall");
if($smallBall.hasClass("circle")){
$smallBall.removeClass("circle");
$smallBall.css("display","block");
$(this).next().children(".smallLine").animate({width:"112px"},1000);
$(this).next().next().children(".smallBall").addClass("circle");
}
});
</script>
</body>
</html>