第一次嘗試這樣封裝函數(shù)，有不對(duì)的地方請(qǐng)大家指正，謝謝！

代碼如下：

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,
 
 //函數(shù)
 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);
 },
 
 /*
  *初始化
  *參數(shù)1：進(jìn)度
  *參數(shù)2：右邊的旋轉(zhuǎn)對(duì)象
  *參數(shù)3：左邊的旋轉(zhuǎn)對(duì)象
  *參數(shù)4：顯示進(jìn)度的對(duì)象
  */
 init : function(per, right, left, num){
  this.per = per;
  this.right_div = right;
  this.left_div = left;
  this.num = num;
  this.move();
 }
};

//調(diào)用
progress.init(90, $('.div1 .right-div3'), $('.div1 .left-div3'), $('.div1 .div4 span'));
progress.init(30, $('.div2 .right-div3'), $('.div2 .left-div3'), $('.div2 .div4 span'));

標(biāo)簽： 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。