html圆环（该代码非原创，具体出处已不详）

最新推荐文章于 2024-04-22 19:32:57 发布

转载最新推荐文章于 2024-04-22 19:32:57 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/baoliwei/p/4431853.html

文章标签：

#javascript #ViewUI

<!doctype>
<html>
   <head>
       <title></title>
       <meta charset="utf-8">
   </head>
   <style>
       .circle {
           width: 200px;
           height: 200px;
           position: absolute;
           border-radius: 50%;
           background: red;
       }
       .pie_left, .pie_right {
           width: 200px;
           height: 200px;
           position: absolute;
           top: 0;left: 0;
       }
       .left, .right {
           display: block;
           width:200px;
           height:200px;
           background:#00aacc;
           border-radius: 50%;
           position: absolute;
           top: 0;
           left: 0;

       }
       .pie_right, .right {
           clip:rect(0,auto,auto,100px);
       }
       .pie_left, .left {
           clip:rect(0,100px,auto,0);
       }
       .mask {
           width: 160px;
           height: 160px;
           border-radius: 50%;
           left: 20px;
           top: 20px;
           background: #FFF;
           position: absolute;
           text-align: center;
           line-height: 150px;
           font-size: 16px;
       }
   </style>
   <script src="js/jquery.js"></script>
   <script>
   $(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
        } else {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        };
    });

});

</script>

   <body>
   <div class="circle">
       <div class="pie_left">
           <div class="left"></div>
       </div>
       <div class="pie_right">
           <div class="right"></div>
       </div>
       <div class="mask">
           <span>10</span>%
       </div>
   </div>
   </body>
</html>