网站链接: HDHCMS 散文随笔
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>JS+CSS实现环形打分效果图

JS+CSS实现环形打分效果图

2019/2/15 8:53:28 0人评论 34次

JS+CSS实现环形打分效果图…


<html>

<head>

<title>test</title>

</head>

<script language="javascript" src="jquery-1.10.2.min.js"></script>

<style type="text/css">

.circle {

transform: rotate(180deg);

width: 200px;

height: 200px;

position: absolute;

border-radius: 50%;

background:#efefef ;

}

.circle .pielbq{

position:absolute;

width: 180px;

height: 180px;

position: absolute;

border-radius: 50%;

background: #fff;

margin:10px;

z-index:10;

}

.left,.right{

width:200px;

height:200px;

position: absolute;

top: 0px;left: 0px;

}

.pie_left, .pie_right{

width:200px;

height:200px;

position: absolute;

border-radius: 50%;

top: 0px;left: 0px;

background: red;

.pie_right,.right {

clip:rect(0,auto,auto,100px);

}

.pie_left , .left{

clip:rect(0,100px,auto,0);

}

.mask {

transform: rotate(-180deg);

position:absolute;

width: 150px;

height: 150px;

border-radius: 50%;

left: 25px;

top: 25px;

text-align: center;

line-height: 150px;

font-size: 16px;

z-index:11;color:#999;

font-size:30px;font-weight:900;

}

.mask span{color:#ff6a00;}

</style>

<body>

<div class="circle">

<div class="pielbq"></div>

<div class="pie_left"><div class="left"></div></div>

<div class="pie_right"><div class="right"></div></div>

<div class="mask"><span>95</span>分</div>

</div>

<script>

$(function(){

if( $('.mask span').text() <= 50 ){

$('.pie_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');

}else{

$('.pie_right').css('transform','rotate(180deg)');

$('.pie_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');

}

})

</script>

</body>

<html>


上一篇:JS实现倒计时

下一篇:JS实现密码加密

相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-4 http://www.yuyanba.com