开发者社区 问答 正文

circliful 插件怎么动态变化

circliful插件怎么动态的变化啊?求大神指教。
我想让里面的百分数和周围的进度条一起变动!

展开
收起
小旋风柴进 2016-05-27 09:16:32 2167 分享 版权
1 条回答
写回答
取消 提交回答
  • 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);
                    }
    2019-07-17 19:17:01
    赞同 展开评论
问答地址: