動態獲取半弧的高度

半弧顯示的基本效果:

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 }

View Code

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來實現的