ie上畫圓餅圖

概述

主要運用到CSS3的transform、js、jq實現餅狀圖效果

詳細

代碼下載：http://www.demodashi.com/demo/10579.html

 

1、準備工做

一、主要運用到CSS3的3D transform等變換

• transform：向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜

值	描述	測試
none	定義不進行轉換。	測試
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。	測試
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。	測試
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。	測試
translateY(y)	定義轉換，只是用 Y 軸的值。	測試
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉換。	測試
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	經過設置 X 軸的值來定義縮放轉換。	測試
scaleY(y)	經過設置 Y 軸的值來定義縮放轉換。	測試
scaleZ(z)	經過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。	測試
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿着 X 軸的 3D 旋轉。	測試
rotateY(angle)	定義沿着 Y 軸的 3D 旋轉。	測試
rotateZ(angle)	定義沿着 Z 軸的 3D 旋轉。	測試
skew(x-angle,y-angle)	定義沿着 X 和 Y 軸的 2D 傾斜轉換。	測試
skewX(angle)	定義沿着 X 軸的 2D 傾斜轉換。	測試
skewY(angle)	定義沿着 Y 軸的 2D 傾斜轉換。	測試
perspective(n)	爲 3D 轉換元素定義透視視圖。	測試

二、對於圓角問題，兼容ie8，須要用到ie-css.htc這個文件。對於圓餅的實現須要運用overflow:hidden屬性根據li的高度限制span標籤內容的顯示。

2、程序實現

原先我在ul標籤上畫一個圓並設置超出隱藏，而後在li就給餅狀圖所佔比例的高度。但其實是不行的，由於ul雖然在ie上顯示爲圓角，可是它自己仍是矩形，因此超出隱藏也是按照矩形來超出隱藏，li也所會顯示爲一個矩形，並不能像我想象那樣li變成圓餅狀。
後面我想到用li來作超出隱藏，若是是百分80%的餅狀圖，li的高度是ul的80%而寬度不變，在li裏面加個span畫一個跟ul如出一轍的圓形。因爲li作了超出隱藏，因此span的圓也只會跟li的高度同樣，這樣圓餅圖就畫出來了。

html代碼以下：

<div class="percentage-img">
  <ul>
   <li><span></span></li>
  </ul>
  <span data-percentage="80"></span>
 </div>

js部分代碼以下：

var explorer = navigator.userAgent;

 var per1 , span1 = $(".percentage-img>span").data("percentage");

 $(".percentage-img>span").html(span1 + "%");

 per1 = parseInt(span1 * 3.6);

       if (explorer.indexOf("MSIE") >= 0) {

           $(".percentage-img>ul>li").css("height", span1);

       } else {

           pertenage(per1, ".percentage-img");

           $(".percentage-img>ul>li").css({

               'position': 'absolute',

               'top': '50px',

               'left': '50px',

               'width': '50px',

               'height': '1px',

               'background-color': '#269dda',

               '-webkit-transform-origin': '0% 0%',

               '-ms-transform-origin': '0% 0%',

               'transform-origin': '0% 0%',

               'z-index': '2'

           })

       }

 

css樣式以下：

.percentage-img{
       position: relative;
       margin: 20px 0;
       border-right: solid 1px #f9f9f9;
       text-align: center;
}
.percentage-img>ul{
       position: relative;
       display: inline-block;
       width: 100px;
       height: 100px;
       border-radius: 100px;
       background-color: #ccc;
}
.percentage-img>span{
       display: inline-block;
       position: absolute;
       top: 0;
       left: 0%;
       width: 100%;
       line-height: 100px;
       text-align: center;
       font-size: 16px;
       color: #fff;
       z-index: 10;
}

 

3、文件、運行截圖

 

一、文件截圖：

雙擊index.html便可看到效果

二、運行效果圖：

 

 

 

 

 

代碼下載：http://www.demodashi.com/demo/10579.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權