css3自定义圆环

来源：互联网发布：php源码测试软件编辑：程序博客网时间：2024/05/29 08:31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD><TITLE> 圆环 </TITLE><style>.circle_bg{width:200px;height:200px;border:18px solid #999999;border-radius:50%;}.wrapper{width: calc(100px + 18px);background-color:transparent;height: calc(200px + 18px*2);margin-top: -18px;position: relative;top:0;float:left;overflow:hidden;}.left{margin-left: -18px;}.right{margin-right: -18px;}.numVal{position:relative;top:-65%;left:45%;}.circle_right{width:200px;height:200px;border:calc(20px - 2px) solid transparent;border-top:calc(20px - 2px) solid green;border-right:calc(20px - 2px) solid green;margin-left: calc(-100px - 18px);border-radius:50% ;-webkit-transform: rotate(-135deg);}.circle_left{width:200px;height:200px;border:calc(20px - 2px) solid transparent;border-left:calc(20px - 2px) solid green;border-bottom:calc(20px - 2px) solid green;border-radius:50%;-webkit-transform: rotate(-135deg);}</style> </HEAD> <BODY>  <div class = "circle_bg" ><div class = "wrapper left" ><div class = "circle_left" ></div></div><div class = "wrapper right" ><div class = "circle_right" ></div></div><div class = "numVal" >0%</div>  </div>  <div>  <div>改变颜色：</div>  <div onClick="changeColor('red')">red</div>  <div onClick="changeColor('green')">green</div>  <div onClick="changeColor('yellow')">yellow</div>  <div onClick="changeColor('blue')">blue</div>  </div>   <div>  <div>改变值：</div>  <div onClick="changeValue(10)">10</div>  <div onClick="changeValue(25)">25</div>  <div onClick="changeValue(40)">40</div>  <div onClick="changeValue(80)">80</div>  </div>  <script SRC="G://jquery-2.1.1.min.js"></script>  <script>//改变颜色function changeColor(curColor){$(".circle_right").css("border-top-color",curColor);$(".circle_right").css("border-right-color",curColor);$(".circle_left").css("border-left-color",curColor);$(".circle_left").css("border-bottom-color",curColor);}//改变值function changeValue(curValue){if(curValue<=50){var rightVal=-135+(parseFloat(180)/parseFloat(50))*parseFloat(curValue);var leftVal=-135;$(".circle_right").css("-webkit-transform","rotate("+rightVal+"deg)");$(".circle_left").css("-webkit-transform","rotate("+leftVal+"deg)");}else if(curValue>50&&curValue<=100){var rightVal=45;var leftVal=-135+(parseFloat(180)/parseFloat(50))*parseFloat(curValue-50);$(".circle_right").css("-webkit-transform","rotate("+rightVal+"deg)");$(".circle_left").css("-webkit-transform","rotate("+leftVal+"deg)");}$(".numVal").html(curValue+"%");}  </script> </BODY></HTML>
阅读全文
0 0