清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
第一次尝试这样封装函数,有不对的地方请大家指正,谢谢!
代码如下:
html部分:
<div class="div1"> <div class="right-div2"> <div class="right-div3"></div> </div> <div class="left-div2"> <div class="left-div3"></div> </div> <div class="div4"><span>0</span>%</div> </div> <div class="div2"> <div class="right-div2"> <div class="right-div3"></div> </div> <div class="left-div2"> <div class="left-div3"></div> </div> <div class="div4"><span>0</span>%</div> </div>
css部分:
*{ margin:0; padding:0;} .div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} .div1 { background:#ccc; position:relative;} .right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} .right-div3 { background:#f00; transform:rotate(-180deg);} .left-div3 { background:#f00; transform:rotate(-180deg);} .div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;} .div2 { left:300px; top:0; position:absolute; background:#ccc; width:200px; height:200px; border-radius:50%;}
js部分:
var progress = { //变量 per : 0, //0~100 per_radian : 0, //0~360 right_div : null, left_div : null, num : null, //函数 move : function (){ this.per_radian = this.per <= 50 ? this.per*3.6-180 : this.per*3.6-360; if(this.per <= 50){ this.right_div.css('transform','rotate(' + this.per_radian + 'deg)'); }else{ this.right_div.css('transform','rotate(0)'); this.left_div.css('transform','rotate(' + this.per_radian + 'deg)'); } this.num.html(this.per); }, /* *初始化 *参数1:进度 *参数2:右边的旋转对象 *参数3:左边的旋转对象 *参数4:显示进度的对象 */ init : function(per, right, left, num){ this.per = per; this.right_div = right; this.left_div = left; this.num = num; this.move(); } }; //调用 progress.init(90, $('.div1 .right-div3'), $('.div1 .left-div3'), $('.div1 .div4 span')); progress.init(30, $('.div2 .right-div3'), $('.div2 .left-div3'), $('.div2 .div4 span'));