jQuery动画圆形进度条

Question

jQuery动画圆形进度条

3

我正在使用一个jQuery脚本来制作一个动画的圆形进度条。目前，当点击开始按钮时，进度条会工作。我希望当用户自动滚动到id为“stats”的div时，进度条会自动开始。如何实现？

我已经创建了一个fiddle来展示我目前的进展：
https://jsfiddle.net/rpkcw236/9/

jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
    namespace: 'pie_progress',
    barsize: '2',
    trackcolor: '#ececea',
    barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
    $('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
     $('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
     $('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
    $('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
    $('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
    $('.pie_progress').asPieProgress('reset');
});
});

这是我使用的脚本链接：
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html

- Alex Zahir

我希望当用户自动滚动到id为“stats”的div时，此进度条可以自动启动。https://jsfiddle.net/rpkcw236/7/上没有可滚动的内容吗？ - guest271314

现在添加了占位符内容，使页面可以滚动。 https://jsfiddle.net/rpkcw236/8/ - Alex Zahir

在 https://jsfiddle.net/rpkcw236/8/ 中未定义 .asPieProgress。 - guest271314

我从GitHub链接中加载了脚本，可能因为这个原因它没有工作。现在已经更新了脚本，现在脚本位于JSFIDDLE Javascript部分：https://jsfiddle.net/rpkcw236/9/ - Alex Zahir

请检查更新的代码，我已在您的Fiddle上进行了测试，完美运作。 - Dev

2个回答

2

尝试使用 #progress 元素的 Element.getBoundingClientRect()，.off() 方法，替代已被删除的 ~~.scrollTop()，.offset().top~~。

  $(window).on("scroll", function() {
    if ($("#progress")[0].getBoundingClientRect().top < 150) {
      $('.pie_progress').asPieProgress('start')
      $(this).off("scroll")
    }
  })

jsfiddle https://jsfiddle.net/rpkcw236/29/

- guest271314

我想省略点击 #button_start 的步骤。我希望当窗口滚动到 #progress 时，它可以自动开始。 - Alex Zahir

我想省略点击 #button_start。当窗口滚动到 #progress 时，我希望它自动启动。你尝试过 jsfiddle https://jsfiddle.net/rpkcw236/10/ 吗？通过使用现有的 click 处理程序，动画确实会在滚动到 #progress 时开始。或者，您可以使用 if ($(this).scrollTop() + 20 >= $("#progress").offset().top) { $('.pie_progress').asPieProgress('start');}。 - guest271314

我的要求是，点击处理程序不应该需要启动动画，而且当窗口滚动到进度时它应该自动开始。你能否更新你的新代码到JSFIDDLE ""if ($(this).scrollTop() + 20 >= $("#progress").offset().top) { $('.pie_progress').asPieProgress('start');} " - Alex Zahir

1

@AlexZahir 请查看更新的帖子；用 getBoundingClientRect() 替换了 .offset().top，.scrollTop()。 - guest271314

我收到了一个 TypeError [0] 未定义的错误。也许你应该查看这个答案：http://stackoverflow.com/questions/36090630/jquery-scripts-overlapping-each-others-functionality/36091075#36091075 - Alex Zahir

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dev · Accepted Answer

你需要将其分为两个步骤： 1）获取动态div距离顶部的距离。 2）一旦您获得了顶部值，请将该值传递给第二步的代码。 步骤1：从顶部获取动态div位置（例如#my-dynamic-div）。

    var $output = $('#output');
    $(window).on('scroll', function () {
    var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-dynamic-div').offset().top,
    distance      = (elementOffset - scrollTop);
    $output.prepend('<p>' + distance + '</p>');
    });

    OR

    E.G: var distance = $("#MyDiv").offset().top

参考：http://jsfiddle.net/Rxs2m/

步骤2：将距离值传递到此处，而不是硬编码的值350。

flag=true;

$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)


if(st>350){
    if(flag)
     $('.pie_progress').asPieProgress('start');
    flag=false;
}
});

祝你好运，希望这可以帮到你。