自定义图片进度条（〜圈）

Question

我卡在这里了。我想把它变成一个进度条，但我不知道该怎么做。 （从A => B）

感谢您的帮助。

http://i.stack.imgur.com/n8fsz.jpg

Answer 1

我发现了这样一个解决方案！ 我希望这有助于！

 
    
 
    function pie(perc) { 
 
    var rightPie = 180; 
 
    var leftPie = 360; 
 
    var rightDeg = null; 
 
    var leftDeg = null; 
 
    
 
    // 180 == 50 x perc ? 
 
    var x = 180 * perc/50; 
 
    
 
    var newPerc = x; 
 
    
 
    if (newPerc < 180) { 
 
     rightDeg = rightPie + newPerc; 
 
    } 
 
    else if (newPerc <= 360 && newPerc >= 180) { 
 
     rightDeg = 360; 
 
     leftDeg = newPerc - 180; 
 
    } 
 
    
 
    if (rightDeg != null) { 
 
     $('body').prepend('<style> .right-pie .char:before { -moz-transform: rotate('+rightDeg+'deg); -ms-transform: rotate('+rightDeg+'deg); -webkit-transform: rotate('+rightDeg+'deg); -o-transform: rotate('+rightDeg+'deg); transform: rotate('+rightDeg+'deg); } </style> '); 
 
     } 
 
    if (leftDeg != null) { 
 
     $('body').prepend('<style> .left-pie .char:before { -moz-transform: rotate('+leftDeg+'deg); -ms-transform: rotate('+leftDeg+'deg); -webkit-transform: rotate('+leftDeg+'deg); -o-transform: rotate('+leftDeg+'deg); transform: rotate('+leftDeg+'deg); } </style> '); 
 
     } 
 
    //$('.log').prepend(newPerc+' - '+leftDeg + ' -- '+ rightDeg); 
 
    } 
 
    
 

 
    // set pie 
 
    pie(26);

.gen-holder { 
 
\t width: 500px; 
 
\t height: 500px; 
 
\t position: relative; 
 
} 
 

 
.right-pie { 
 
\t width: 250px; 
 
\t height: 500px; 
 
\t background: url(http://crf.ngo/view/img/orphan-s-right.png) no-repeat left center; 
 
\t background-size: 200px 400px; 
 
\t position: absolute; 
 
\t right: 0px; 
 
\t top: 0px; 
 
\t content: " "; 
 
\t z-index: 15; 
 
\t overflow: hidden; 
 
} 
 
.right-pie .char { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 500px; 
 
    -moz-transform-origin: left center; 
 
    -ms-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    -webkit-transform-origin: left center; 
 
    transform-origin: left center; 
 
    left: 0px; 
 
} 
 
.right-pie .char:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 500px; 
 
    border-radius: 250px 0 0 250px; 
 
    background: #fff; 
 
    -moz-transform-origin: right center; 
 
    -ms-transform-origin: right center; 
 
    -o-transform-origin: right center; 
 
    -webkit-transform-origin: right center; 
 
    transform-origin: right center; 
 
    
 
    left: -250px; 
 
    z-index: 20; 
 
} 
 
.left-pie { 
 
\t width: 250px; 
 
\t height: 500px; 
 
\t background: url(http://crf.ngo/view/img/orphan-s-left.png) no-repeat right center; 
 
\t background-size: 200px 400px; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t content: " "; 
 
\t z-index: 45; 
 
\t overflow: hidden; 
 
} 
 
.left-pie .char { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 500px; 
 
    -moz-transform-origin: left center; 
 
    -ms-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    -webkit-transform-origin: left center; 
 
    transform-origin: left center; 
 
    left: 0px; 
 
} 
 
.left-pie .char:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 500px; 
 
    border-radius: 250px 0 0 250px; 
 
    background: #fff; 
 
    -moz-transform-origin: right center; 
 
    -ms-transform-origin: right center; 
 
    -o-transform-origin: right center; 
 
    -webkit-transform-origin: right center; 
 
    transform-origin: right center; 
 
    left: 0px; 
 
    z-index: 20; 
 

 
} 
 

 
.image-holder { 
 
\t float: left; 
 
\t width: 350px; 
 
\t height: 350px; 
 
\t text-align: center; 
 
\t -webkit-mask-image: url(http://crf.ngo/view/img/orphan-mask-1.png); 
 
\t mask-image: url(http://crf.ngo/view/img/orphan-mask-1.png); 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
\t margin-left: 75px; 
 
\t margin-top: 75px; 
 
\t position: relative; 
 
\t z-index: 50; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gen-holder"> 
 
     <div class="image-holder" style="background-image: url(https://c1.staticflickr.com/9/8594/16537918922_cef77dead4_h.jpg)"> 
 
     </div> 
 
     <div class="right-pie"> 
 
      <div class="char"></div> 
 
     </div> 
 
     <div class="left-pie"> 
 
      <div class="char"></div> 
 
     </div> 
 
\t \t </div> 
 

 
<div class="log"></div>