已经解决了!!! html页面: <div id="stat-one" data-dimension="250" data-text="0%" data-info="正在导入..." data-width="30" data-fontsize="38" data-percent="0" data-fgcolor="#61a9dc" data-bgcolor="#eee" style="margin: 30px auto;"></div> </div> js页面 $('#stat-one').circliful(); var statId = $('#stat-one').attr('id'); var idNum = 1; setInterval(function () { var statHtml = '<div id="'+ statId+idNum +'" data-dimension="250" data-text="'+ idNum+'%' +'" data-info="正在导入..."'+ 'data-width="30" data-fontsize="38" data-percent="'+ idNum +'" data-fgcolor="#61a9dc"'+ 'data-bgcolor="#eee" style="margin: 30px auto;"></div>'; $('.stat-div').html(statHtml); $('#'+statId+idNum).circliful(); idNum++; },2000); 如果想每次让进度条不重头开始滑动的话,可以修改jquery.circliful.js: if (curPerc < endPercent) { curPerc += curStep; requestAnimationFrame(function () { animate(Math.min(curPerc, endPercent) / 100); }, obj); } 改为 if (curPerc < endPercent) { curPerc += curStep; //requestAnimationFrame(function () { animate(Math.min(curPerc, endPercent) / 100); //}, obj); }
已经解决了!!!
html页面:
js页面
如果想每次让进度条不重头开始滑动的话,可以修改jquery.circliful.js:
改为