由于业务需要,个人查了一下资料做了一个会滚动的百分比的圆型进度条,效果图如下,由于我的博客园js权限还没申请好,所以不能看到js运行的过程,在这里我总结一下实现过程。其中参考了http://www.tuicool.com/articles/AVRvmqm,并在此基础上进行了修改
效果图
效果图
1.先创建一个正方形。
.square{
margin: 20px auto;
width: 200px;
height: 200px;
border: 1px solid #aaa;
position: relative;
}
<div class="square">
</div>
效果图
2.正方形左右各创建一个矩形,这里我为了显示比较明显,加上了有颜色的border,看上去两个矩形有重复,实际去掉border的位置两个矩形加起来刚好占据一个正方形.
在这里overflow:hidden起到很重要作用,至于作用看到下一步就知道了
.half-square{
width: 100px;
height: 200px;
position: absolute;
overflow:hidden;
top:0;
}
.half-square.left{
left: 0;
border: 1px solid red;
}
.half-square.right{
right:0;
border: 1px solid green;
}
<div class="square">
<div class="half-square left"></div>
<div class="half-square right"></div>
</div>
效果图
3.这一步可以把上面的写的两个矩形的border去掉了。在这一步我先简单介绍一下border-radius这个属性,通过他可以设置border的弯曲度,通常而言我们都设置他为50%来达到圆型的效果。想更详细了解这个属性,各位童鞋可以自行百度一下
这里我们在右边矩形里面加入一个右半圆。本来应该可以显示半个圆形的,但是由于上面设置overflow:hidder,使得他只能显示一部分。
.circle{
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.circle.right{
right: 0;
border-top:20px solid red;
border-right:20px solid red;
}
<div class="square">
<div class="half-square left">
<!-- <div class="circle left"></div> -->
</div>
<div class="half-square right">
<div class="circle right">
</div>
</div>
</div>
效果图
4.通过旋转调整的到不同进度
.circle.right{
right: 0;
border-right:20px solid red;
border-top: 20px solid red;
transform: rotate(45deg);
}
效果图
通过旋转45%就可以获得一个完整的半圆,同理我们如果不想显示,也就是进度为0,只需要旋转-135%。这样我们就可以通过旋转角度来表达进度的多少
5.同理得到左半圆,我们也可以通过旋转左半圆得到不同的进度,旋转135%左半圆就不会显示,旋转325%左半圆就会完全显示
.circle.left{
left: 0;
border-left:20px solid red;
border-top: 20px solid red;
transform: rotate(-45deg);
}
<div class="square">
<div class="half-square left">
<div class="circle left">
</div>
</div>
<div class="half-square right">
<div class="circle right">
</div>
</div>
</div>
效果图
6.实现40%进度的显示
经历过刚刚的展示,我们知道如果我们想左边显示的有效旋转角度是135%~325%,而右边显示的有效角度是-135%~45%,因此我们只需要根据进度去调整左右两个圆就好了。我们知道50%进度对应的180%的圆弧,也就是1点进度对应3.6圆弧度
因为我们只想显示40度,即小于50度的角度,只需要右半圆显示就好了,左半圆对他进行隐藏。因此我们有以下设置
.circle.left{
left: 0;
border-left:20px solid red;
border-top: 20px solid red;
transform: rotate(135deg);
}
而右边显示-135%~45%之间的40度就好了,也就是-135%+40*3.6,即9%。
.circle.right{
right: 0;
border-right:20px solid red;
border-top: 20px solid red;
transform: rotate(9deg);
}
效果图
7.显示70%的进度
此时右半圆肯定是全部都显示出来了,因为右半圆代表50%,而只需要调整左半圆的20%就好了,而从第五步可以知道,左半圆的有效旋转范围是135%~325%,而我们显示的是20%,所以需要135+20*3.6即207度。
效果图
8.通过js自动根据参数调整角度
我们总不能去傻乎乎地根据百分比去手动设置旋转度数,此时就需要借助js去调整。
这里我就不慢慢分析代码了,其实上面已经解释得很清楚了,下面只不过是用代码表示,主要是通过修改左右半圆的属性值去修改角度,别忘了把两个半圆的初始值设为0哦
function circlePercent(percent){
if(percent>100 || percent<0){
return false;
}else{
if(percent<=50){
per=percent*3.6-135;
document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
}else{
per=(percent-50)*3.6+135;
document.getElementById("right-circle").style.transform = "rotate(45deg)";
document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
}
}
}
9.添加动画效果。
主要是通过设置js的setInterval来一点点调整角度,最终代码如下,直接ctrl+c,ctrl+v就可以用了....
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.square{
margin: 20px auto;
width: 200px;
height: 200px;
/*border: 1px solid #aaa;*/
position: relative;
}
.half-square{
width: 100px;
height: 200px;
position: absolute;
overflow: hidden;
top:0;
}
.half-square.left{
left: 0;
/*border: 1px solid rgb(3,205,203);*/
}
.half-square.right{
right:0;
/*border: 1px solid green;*/
}
.background{
width:200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.circle{
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.circle.left{
left: 0;
border-left:20px solid rgb(3,205,203);
border-top: 20px solid rgb(3,205,203);
transform: rotate(135deg);
}
.circle.right{
right: 0;
border-right:20px solid rgb(3,205,203);
border-top: 20px solid rgb(3,205,203);
transform: rotate(-135deg);
}
.circle.inner{
border:20px solid rgb(230,230,230);
display: table-cell;
vertical-align: middle;
position: relative;
}
.inner-content{
margin: 0 auto;
width: 50%;
text-align: center;
}
</style>
<script type="text/javascript">
var percent = 0;
var circleTimeId = null;
function circlePercent(time){
if(percent>100 || percent<0){
return false;
}
if(percent > time ){
clearInterval(circleTimeId);
}else{
if(percent<=50){
per=percent*3.6-135;
document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
}else{
per=(percent-50)*3.6+135;
document.getElementById("right-circle").style.transform = "rotate(45deg)";
document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
}
document.getElementById("percent-num").innerHTML= percent;
percent = percent + 1;
}
}
function time(time){
circleTimeId = setInterval("circlePercent("+time+")",20);
}
</script>
</head>
<body onload="time(70)">
<div class="square">
<div class="background">
<div class="circle inner">
<div class="inner-content"><span id="percent-num">0</span>%</div>
<div class="inner-content">进度</div>
</div>
</div>
<div class="half-square left">
<div class="circle left" id="left-circle">
</div>
</div>
<div class="half-square right">
<div class="circle right" id="right-circle">
</div>
</div>
</div>
</body>
</html>