jquery圆环

最新推荐文章于 2023-03-07 08:41:45 发布

zengna_com

最新推荐文章于 2023-03-07 08:41:45 发布

阅读量685

点赞数

本文链接：https://blog.csdn.net/thundor/article/details/38685581

版权

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="JQ/jquery.mobile-1.4.3.min.css">
<script src="JQ/jquery-1.11.1.min.js"></script>
<script src="JQ/jquery.mobile-1.4.3.min.js"></script>

<script>
$(function() {
    $('.circle').each(function(index, el) {
        var num = /\d+/.exec($('.Smallmask').text()) / /\d+/.exec($('.mask').text())  * 360;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
            $('.circle').find('.left').css('transform', "rotate(0deg)");
        }else if(num>180 && num<=360) {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        }else{
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(180deg)");
        };
    });
});	
</script>


</head>
<style>
body {
	font: normal 100% "微?雅黑", "Helvetica Neue", Helvetica, STHeiTi,
		sans-serif;
	width: 640px;
	margin:0 auto;
	overflow-x: hidden;
}

.circleContral{
    position:absolute;
    left: 500px;
}

.circleBG {
    width: 210px;
    height: 210px;  
    border-radius: 50%;
    background: #E4E4E4;
    position:absolute;
}
.circle {
    width: 200px;
    height: 200px;  
    border-radius: 50%;
    background: #437867;
    position:absolute;
    top: 5px;left: 5px;
  
}
.pie_left, .pie_right {
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    display: block;
    width:200px; 
    height:200px;
    background:#A9DDCC;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
    clip:rect(0,100px,auto,0);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.SmallmaskBG {
    width: 80px;
    height: 80px;
    left: 180px;
    top: 15px;
    border-radius: 50%;
    background: #E4E4E4;
    position: relative;
}
.Smallmask {
    width: 70px;
    height: 70px;
    left: 5px;
    top: 5px;
    border-radius: 50%;
    background: #FCFCFC;
    position:  absolute;
    text-align: center;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>
<body>

<div data-role="page" id="pageone">
    <div data-role="header">
	<a href="#" data-role="button" data-icon="back" data-iconpos="notext" value="Icon only"></a>
	<h1>Page Title</h1>
    </div>
    
    <div data-role="main" class="ui-content">
	<div class="circleContral">
	    <div class="circleBG">
		<div class="circle">
		  <div class="pie_left"><div class="left"></div></div>
		  <div class="pie_right"><div class="right"></div></div>
		<div class="mask">Total:<br/>200bills
		</div>
		</div>
	    </div>
	    
	    <div class="SmallmaskBG">
		<div class="Smallmask">88bills<br/>Finished
		</div>
	    </div>
	</div>
    </div>
</div> 

</body>
</html>