">
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx

基于jQuery的圆环进度条函数封装

第一次尝试这样封装函数,有不对的地方请大家指正,谢谢!

代码如下:

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'));