基于jQuery的圆环进度条函数封装详解编程语言

*{ 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));

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/8627.html