圆环进度效果，效果超过highcharts

JavaScript基础

下载此实例

开发语言：js
实例大小：5.32KB
下载次数：24
浏览次数：1318
发布时间：2015-07-13
实例类别：JavaScript基础
发布人：xueli
文件格式：.html
所需积分：1

实例介绍

【实例简介】不用任何插件，使用CSS3 原生JS，做圆环进度效果，效果超过highchart
【实例截图】

【核心代码】<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>金融工场</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td,b {
margin: 0; padding: 0;}
body, html{position:relative;margin:0 auto;}
html{height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased;}

html {
font-size: 62.5%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}

ul, ol, li { list-style: none outside none;}
/** 画圆算法 **/
.circle-progress {
top:6px;
height: 66px;
left: 0px;
margin: auto;
position: relative;
width: 66px;
}
.circle-progress .circle-left {
border-color: #ee5930 #dedede #dedede #ee5930;
border-image: none;
-webkit-border-radius: 50%;
border-radius: 50%;
border-style: solid;
border-width: 3px;
height: 66px;
position: absolute;
top: 0;
-webkit-transform: rotate(-225deg);
width: 66px;
-webkit-box-sizing:border-box;
}
.circle-progress .circle-right {
-webkit-border-bottom-colors: none;
-webkit-border-left-colors: none;
-webkit-border-right-colors: none;
-webkit-border-top-colors: none;
border-color: #e0e0e0 #ee5930 #ee5930 #e0e0e0;
border-image: none;
-webkit-border-radius: 50%;
border-radius: 50%;
border-style: solid;
border-width: 0.3rem;
height: 66px;
left: -33px;
position: absolute;
top: 0;
-webkit-transform: rotate(-225deg);
width: 66px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.circle-progress .circle-inner-left {
height: 66px;
overflow: hidden;
position: absolute;
top: 0;
width: 33px;
}
.circle-progress .circle-inner-right {
height: 66px;
left: 33px;
overflow: hidden;
position: absolute;
top: 0;
width: 33px;
}
.circle-progress .circle-progress-text {
color: #ee5930;
font-size: 1.8rem;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 9px);
}

</style>
</head>
<body>
<div class="">
<ul>
<li>
<div class="circle-progress">
<input type="hidden" value="3000" />
<div class="circle-inner-left">
<div class="circle-left"></div>
</div>
<div class="circle-inner-right">
<div class="circle-right"></div>
</div>
<span class="circle-progress-text">抢</span>
</div>
</li>
<li style="margin-top:20px">
<div class="circle-progress">
<input type="hidden" value="2000" />
<div class="circle-inner-left">
<div class="circle-left"></div>
</div>
<div class="circle-inner-right">
<div class="circle-right"></div>
</div>
<span class="circle-progress-text">抢</span>
</div>
</li>
<li style="margin-top:20px">
<div class="circle-progress">
<input type="hidden" value="3800" />
<div class="circle-inner-left">
<div class="circle-left"></div>
</div>
<div class="circle-inner-right">
<div class="circle-right"></div>
</div>
<span class="circle-progress-text">抢</span>
</div>
</li>
<li style="margin-top:20px">
<div class="circle-progress">
<input type="hidden" value="6500" />
<div class="circle-inner-left">
<div class="circle-left"></div>
</div>
<div class="circle-inner-right">
<div class="circle-right"></div>
</div>
<span class="circle-progress-text">抢</span>
</div>
</li>
<li style="margin-top:20px">
<div class="circle-progress">
<input type="hidden" value="7100" />
<div class="circle-inner-left">
<div class="circle-left"></div>
</div>
<div class="circle-inner-right">
<div class="circle-right"></div>
</div>
<span class="circle-progress-text">抢</span>
</div>
</li>
</ul>
</div>
<script>
var progressDeg = function (progress, part) {
if (progress > 9900) {
var percent = Math.floor(progress / 100);
} else {
var percent = Math.ceil(progress / 100);
}
var degree = '';
if (part) {
if (percent > 50) {
degree = '-' (225 - ((percent - 50) * 180 / 50)) 'deg';
} else {
degree = '-225deg';
}
} else {
if (percent > 50) {
degree = '-45deg';
} else {
degree = '-' (((50 - percent) * 180 / 50) 45) 'deg';
}
}
return degree;
}
$(".circle-progress").each(function(i){
var obj=$(this);
var pert=obj.find("input[type=hidden]").val();
domove(obj,pert);
})

function domove(obj,pert){
setTimeout(function(){
obj.find(".circle-left").css("-webkit-transition","0.5s ease-in");
obj.find(".circle-right").css("-webkit-transition","0.5s ease-in");
obj.find(".circle-left").css("-webkit-transform","rotate(" progressDeg(pert,true) ")");
obj.find(".circle-right").css("-webkit-transform","rotate(" progressDeg(pert,false) ")");
},10)
}

</script>
</body>
</html>

标签： H5 CSS3 JS

实例下载地址