半弧显示的基本效果:
dom结构:
1 <ul> 2 <li> 3 <div class="messagesTitle"> 4 已发 5 <p>本月已发短信数</p> 6 </div> 7 <div class="green clock"> 8 <div class="display">@ViewBag.AlreadyCount</div><!--中心圆展示的数字--> 9 <div class="rotate left"><!--左半圆--> 10 <div class="bg left"></div> 11 </div> 12 <div class="rotate right"><!--右半圆--> 13 <div class="bg right"></div> 14 </div> 15 </div> 16 </li> 17 <li> 18 <div class="messagesTitle"> 19 剩余 20 <p>本月剩余短信数</p> 21 </div> 22 <div class="orange clock"> 23 <div class="display">@(ViewBag.MaxLimitCount - ViewBag.AlreadyCount)</div> 24 <div class="rotate left surplus"> 25 <div class="bg left"></div> 26 </div> 27 <div class="rotate right rightSurplus"> 28 <div class="bg right"></div> 29 </div> 30 </div> 31 </li> 32 </ul>
css代码:
1 .clock{ 2 height:120px; 3 width:120px; 4 position:relative; 5 overflow:hidden; 6 margin:20px auto; 7 } 8 .clock .rotate{ 9 position:absolute; 10 width:120px; 11 height:120px; 12 top:0; 13 left:0; 14 } 15 .rotate.right{ 16 display:none; 17 z-index:11; 18 } 19 .clock .bg, .clock:before{ 20 width:60px; 21 height:120px; 22 position:absolute; 23 top:0; 24 background-color:#fff; 25 } 26 .clock:before{ 27 left:0; 28 z-index:10; 29 content:''; 30 } 31 .clock .display{ 32 position: absolute; 33 left: 34px; 34 top: 0; 35 color: #333; 36 font-size: 29px; 37 text-align: center; 38 line-height: 120px; 39 z-index: 20; 40 } 41 .clock .bg.left{ 42 left:0; 43 } 44 .green .bg.left{ 45 background:url('../images/usercire.png') no-repeat left top; 46 } 47 .orange .bg.left{ 48 background:url('../images/surplus.png') no-repeat left top; 49 } 50 .clock .bg.right{ 51 left:60px; 52 } 53 .green .bg.right{ 54 background:url('../images/usercire.png') no-repeat right top; 55 } 56 .orange .bg.right{ 57 background:url('../images/surplus.png') no-repeat right top; 58 }
js代码:
1 window.onload = function () { 2 /*修改首页的我的底下的可发送的半弧大小*/ 3 var angle = 360 / "@ViewBag.MaxLimitCount" , 4 transformangle = angle * "@ViewBag.AlreadyCount", 5 transformanglelimit = 360 - transformangle; 6 transformangle <= 180 ? $(".rotate.right").hide() : $(".rotate.right").show(); 7 transformanglelimit <= 180 ? $(".rotate.rightSurplus").hide() : $(".rotate.rightSurplus").show(); 8 9 if (transformangle <= 180) { 10 $(".rotate.left").css("transform", "rotate(" + transformangle + "deg)"); 11 transformanglelimit = transformanglelimit - 180; 12 $(".rotate.surplus").css("transform", "rotate(180deg)"); 13 $(".rotate.rightSurplus").css("transform", "rotate(" + transformanglelimit + "deg)"); 14 } else { 15 transformangle = transformangle - 180; 16 $(".rotate.left").css("transform", "rotate(180deg)"); 17 $(".rotate.right").css("transform", "rotate(-" + transformangle + "deg)"); 18 $(".rotate.surplus").css("transform", "rotate(" + transformanglelimit + "deg)"); 19 } 20 }
最终的效果图:
备注:通过对一个图片进行简单的切割,主要切割成两个半圆的形式,然后,通过transform进行页面的旋转功能
形成两个半圆,主要是根据css来实现的,而获取页面的取值然后来通过弧度来进行弧度的旋转,是通过js来实现的