ie百分比的圆

2024-02-09 21:04:04

其实一开始我是做成这样的，直接先用ul定义一个灰色的园，然后用jq获取里面的百分比的值，把值*3.6取整，然后循环一遍每一个值画一条旋转的直线。

<!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的样式改成

而除ie以外的浏览器还是没变。
这个的思路，我一开始以为用ul画个圆加上超出隐藏，li就宽度和ul一样，高度就是获取百分比*ul的高度的值，但是我IE的圆兼容是用了ie-css.htc这个文件去兼容的。虽然在ie上ul显示是一个圆，但是ul其实实际上还是一个矩形，所以超出隐藏就得li也所会显示为一个矩形，并不能像我想象那样li变成上图那样。
然后我就想能不能以li获取的值来做显示隐藏，而在里面加个span来显示圆。

<!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>

本文转载于:猿2048➬https://www.mk2048.com/blog/blog.php?id=hacab22akhj

码农公寓

相关文章