css:
*{ margin: 0; padding: 0; } @media screen and (min-320px){ html{font-size:12px;}} @media screen and (min-360px){ html{font-size:14px;}} @media screen and (min-400px){ html{font-size:16px;}} @media screen and (min-480px){ html{font-size:20px;}} @media screen and (min-560px){ html{font-size:24px;}} @media screen and (min-640px){ html{font-size:28px;}} .wrap,.circle,.percent{ position: absolute; width: 4.46rem; height: 4.46rem; border-radius: 50%; } .wrap{ /*top:10px;*/ /*left:10px;*/ background-color: #ccc; } .circle{ box-sizing: border-box; border: 0.1785rem solid #ccc; clip:rect(0,4.6rem,4.6rem,2.23rem); /**/ } .clip-auto{ clip:rect(auto,4.6rem,4.6rem,auto); } .percent{ box-sizing: border-box; top:-0.14rem; left:-0.14rem; } .left{ transition:transform ease; border: 0.1785rem solid deepskyblue; clip: rect(0,2.13rem,4.6rem,0); } .right{ border: 0.1785rem solid deepskyblue; clip: rect(0,4.6rem,4.6rem,2.13rem); } .wth0{ width:0; } .num{ position: absolute; box-sizing: border-box; width: 4.1rem; height: 4.1rem; line-height: 1.07rem; text-align: center; font-size: 1.07rem; left: 0.1785rem; top: 0.1785rem; border-radius: 50%; background-color: #fff; z-index: 1; padding-top: 0.535rem; }
html:
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <article style="height: 100rem;"></article> <div id="process1" class="wrap"> <!--<div class="circle">--> <!--<div class="percent left"></div>--> <!--<div class="percent right wth0"></div>--> <!--</div>--> <!--<div class="num"><em>已售</em><br><span>80</span>%</div>--> </div> <article style="height: 10rem;"></article> <div id="process2" class="wrap"></div> <article style="height: 10rem;"></article> <div id="process3" class="wrap"></div> <article style="height: 10rem;"></article> <div id="process4" class="wrap"></div> <article style="height: 100rem;"></article> </body> <script src="jquery-1.11.3.min.js"></script>
<script src="animate.js"></script>
<script>
//数据传入接口：
$(function() {
$("#process1").FnExe({
num : "80"
});
$("#process2").FnExe({
num : "60"
});
$("#process3").FnExe({
num : "90"
});
$("#process4").FnExe({
num : "20"
});
});
</script>
</html>
基于jQuery插件部分animate.js：
(function($) { var defaults = { num : "0" }; var settings = {}; var $This = null; function FnExe(options) { $This = this; settings = $.extend(settings,defaults,options); // console.log(settings); FnCreate( this ); FnProcess( this ); } function FnCreate(th) { $This = th; var $innerCircle = $("<div class='circle'></div>"); $innerCircle.appendTo($This); var $innerLeft = $("<div class='percent left'></div>"); $innerLeft.appendTo($innerCircle); var $innerRight = $("<div class='percent right wth0'></div>"); $innerRight.insertAfter($innerLeft); var $innerNum = $("<div class='num'><em>已售</em><br><span>"+settings.num+"</span>%</div>"); $innerNum.insertAfter($innerCircle); } function FnProcess(th) { $This = th; function process() { var percent=0; var $num = $This.find(".num > span").text(); var loading = null; loading = setInterval(function() { if(percent>50) { $This.find(".circle").addClass("clip-auto"); $This.find(".right").removeClass("wth0"); } $This.find('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)"); $This.find(".num > span").text(percent); percent++; if(percent-1 == $num) { clearInterval(loading); } },30); } var flag = true; console.log($This); var $This = $This; console.log($This); $(window).scroll(function() { console.log($This); if($This.offset().top < parseInt( $(window).scrollTop() + $(window).height() * 0.3)) { if(flag) { $This.one("trigger",process()); flag = !flag; } } } ); } $.fn.extend({ FnExe : FnExe }) })(jQuery);