jquery、css3动态显示百分比圆

来源：互联网发布：韩国网络电视机顶盒编辑：程序博客网时间：2024/04/28 06:34

jquery、css3动态显示百分比圆

实习了半年，最大的收获就是想学好前端就要奈得住寂寞，收得了心。虽然我还不能向我老大一样，没事就看书，，，，只要没事就看书的好习惯，不过会慢慢好起来的，最近看了一个设计图，其中有一个功能就是根据客户的融资进度来显示不同的百分比，如下图：
这里写图片描述
最开始看到的第一反应就是找找有没有相应的插件，上网查了一些资料，主要用到css的rect(top,right,bottom,left)、transform: rotate(deg)属性

html

 <div class="circle">        <div class="pie_left"><div class="left"></div></div>        <div class="pie_right"><div class="right"></div></div>        <div class="theValue"><span class="vauNum">81</span>%</div>    </div>       <div class="circle">        <div class="pie_left"><div class="left"></div></div>        <div class="pie_right"><div class="right"></div></div>        <div class="theValue"><span class="vauNum">20</span>%</div>    </div>

css

.circle {    width: 200px;    height: 200px;      position: relative;    float:left;    border-radius: 50%;    background: #F64E58;    overflow: hidden;}.pie_left, .pie_right {    width: 200px;     height: 200px;    position: absolute;    top: 0;left: 0;}.left, .right {    width:200px;     height:200px;    background:#C3C3C3;    border-radius: 50%;    position: absolute;    top: 0;    left: 0;}.right{  /*  transform: rotate(30deg);*/}.pie_right, .right {    clip:rect(0,auto,auto,100px);}.pie_left, .left {    clip:rect(0,100px,auto,0);}.theValue {    width: 180px;    height: 180px;    border-radius: 50%;    top: 10px;    left: 10px;    background: white;    position: absolute;    text-align: center;    line-height: 180px;    font-size: 20px;    color: #F64E58;;}

jquery：

    $(function() {    $('.circle').each(function(index, el) {        var num = $(this).find('.vauNum').text() * 3.6;        if (num<=180) {                    $(this).find('.right').css('transform', "rotate(" +num + "deg)");        } else{             var that=$(this).find('.right');             that.css('transform', "rotate(180deg)");            $(this).find('.left').css('transform', "rotate(" + (num-180) + "deg)")        };    });});

这里写图片描述
其实对于上诉代码的主要思想利用clip属性将.pie_right,.right、.pie_left, .left分别裁剪右部分和左边部分，将所有的div的 border-radius设置为50%；就形成了一个最下面的红色圆与中间两个灰色的半圆，和用来遮盖的最上面的白色的小圆，只要我们旋转灰色的半圆，底部红色的部分机会显示出来

这里写图片描述

再加上白色级遮盖部分就行了。

但是我想红色的部分动态的显示，就是有一个过渡的过程，但是jquery动画和css3的一些动画属性是不兼容的，如果想用transform: rotate(deg)，那就得用jquery改变css样式，所以上网查了jquery中animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。我们可以使用一个不影响元素效果显著的css值来触发animate()开发方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了

jquery代码：

 $(function() {    $('.circle').each(function(index, el) {        var num = $(this).find('.vauNum').text() * 3.6;        if (num<=180) {            $(this).find('.right').animate({                aa:num            },{                    step:function(now,fx){                    $(this).css('transform', "rotate(" +now + "deg)");            },            duration:1500        })        } else{            var that=$(this).find('.right');             that.css('transform', "rotate(180deg)");            $(this).find('.left').animate({              cc:num-180            },{               step:function(now,fx){                  console.log(now+"ccc");                        //参数step：规定每个动画的每一步完成之后要执行的函数                        // now:是当前动画正在改变的属性的实时值；                        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如                        // 执行动画的元素：elem;                        // 动画正在改变的属性：prop;                        // 正在改变属性的当前值：now;                        // 正在改变属性的结束值：end;                        // 正在改变属性的单位：unit;等                        // 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值                   $(this).css('transform', "rotate(" + (now) + "deg)");               },                duration:1500            })        };    });});

全部代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><style> .circle {    width: 200px;    height: 200px;      position: relative;    float:left;    border-radius: 50%;    background: #F64E58;    overflow: hidden;}.pie_left, .pie_right {    width: 200px;     height: 200px;    position: absolute;    top: 0;left: 0;}.left, .right {    width:200px;     height:200px;    background:#C3C3C3;    border-radius: 50%;    position: absolute;    top: 0;    left: 0;}.right{  /*  transform: rotate(30deg);*/}.pie_right, .right {    clip:rect(0,auto,auto,100px);}.pie_left, .left {    clip:rect(0,100px,auto,0);}.theValue {    width: 180px;    height: 180px;    border-radius: 50%;    top: 10px;    left: 10px;    background: white;    position: absolute;    text-align: center;    line-height: 180px;    font-size: 20px;    color: #F64E58;}</style></head><body>    <div class="circle">        <div class="pie_left"><div class="left"></div></div>        <div class="pie_right"><div class="right"></div></div>        <div class="theValue"><span class="vauNum">81</span>%</div>    </div>       <div class="circle">        <div class="pie_left"><div class="left"></div></div>        <div class="pie_right"><div class="right"></div></div>        <div class="theValue"><span class="vauNum">20</span>%</div>    </div><script type="text/javascript">    $(function() {    $('.circle').each(function(index, el) {        var num = $(this).find('.vauNum').text() * 3.6;        if (num<=180) {            $(this).find('.right').animate({                aa:num            },{                    step:function(now,fx){                    $(this).css('transform', "rotate(" +now + "deg)");            },            duration:1500        })        } else{            var that=$(this).find('.right');             that.css('transform', "rotate(180deg)");               $(this).css('transform', "rotate(0deg)");            $(this).find('.left').animate({              cc:num-180            },{               step:function(now,fx){                  console.log(now+"ccc");                        //参数step：规定每个动画的每一步完成之后要执行的函数                        // now:是当前动画正在改变的属性的实时值；                        // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如                        // 执行动画的元素：elem;                        // 动画正在改变的属性：prop;                        // 正在改变属性的当前值：now;                        // 正在改变属性的结束值：end;                        // 正在改变属性的单位：unit;等                        // 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值                   $(this).css('transform', "rotate(" + (now) + "deg)");               },                duration:1500            })        };    });});</script></body></html>

同事说用svg要清楚一点，我再去看看一下svg

写博客这种事第一次，还是我老大鼓励我的，实习狗的第一次要记录

1 0