ie百分比的圓

時間 2019-11-05

標籤百分比简体版

原文原文鏈接

其實一開始我是作成這樣的，直接先用ul定義一個灰色的園，而後用jq獲取裏面的百分比的值，把值*3.6取整，而後循環一遍每個值畫一條旋轉的直線。css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.9.0.js"></script>
</head>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
li{list-style: none;}
.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>ul>li{
       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;
}

.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;
}
</style>

<body>
    <div class="percentage-img">
        <ul>
            <li><span></span></li>
        </ul>
         <span data-percentage="80"></span>
    </div>
</body>
<script>
    var explorer = navigator.userAgent;
    var per1 , span1 = $(".percentage-img>span").data("percentage");
    $(".percentage-img>span").html(span1 + "%");
    per1 = parseInt(span1 * 3.6);
    pertenage(per1, ".percentage-img");
    function pertenage(num, cl) {
        var circleBorder = "";
        for (var i = 0; i < num; i++) {
            circleBorder += "<li style='-webkit-transform:rotate(" + i + "deg);-ms-transform:rotate(" + i + "deg);transform:rotate(" + i + "deg)'></li>"
        }
        $(cl + ">ul").html(circleBorder);
    }
</script>
</html>

可是這個ie上會讓瀏覽器變得比較卡而已也不兼容。
而後我就把ie的樣式改爲
html

而除ie之外的瀏覽器仍是沒變。
這個的思路，我一開始覺得用ul畫個圓加上超出隱藏，li就寬度和ul同樣，高度就是獲取百分比*ul的高度的值，可是我IE的圓兼容是用了ie-css.htc這個文件去兼容的。雖然在ie上ul顯示是一個圓，可是ul其實實際上仍是一個矩形，因此超出隱藏就得li也所會顯示爲一個矩形，並不能像我想象那樣li變成上圖那樣。
而後我就想能不能以li獲取的值來作顯示隱藏，而在裏面加個span來顯示圓。jquery

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.9.0.js"></script>
</head>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

li{list-style: none;}

.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;
}
</style>

<body>
    <div class="percentage-img">
        <ul>
            <li><span></span></li>
        </ul>
         <span data-percentage="80"></span>
    </div>
</body>
<!--[if IE]>
    <style type="text/css">
        .percentage-img>ul{
              z-index: 1;
              behavior: url(ie-css3.htc);
        }
        .percentage-img>ul>li {
              position: relative;
              width: 100px;
              height: 80px;
              overflow: hidden;
        }

        .percentage-img>ul>li>span{
              position: relative;
              display: inline-block;
              width: 100px;
              height: 100px;
              border-radius: 100px;
              background-color: #269dda;
              z-index: 1;
              behavior: url(ie-css3.htc);
        }
    </style>
<![endif]-->
<script>
    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'
           })
       }
    function pertenage(num, cl) {
        var circleBorder = "";
        for (var i = 0; i < num; i++) {
            circleBorder += "<li style='-webkit-transform:rotate(" + i + "deg);-ms-transform:rotate(" + i + "deg);transform:rotate(" + i + "deg)'></li>"
        }
        $(cl + ">ul").html(circleBorder);
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。