Question

我正在尝试使用航点触发circliful图表。我希望动画从某个航点开始。芽图仅出现在航点上，并且在尚未到达航点时不可见。这是jquery：

$(document).ready(function() {
    $('#waypointDiv').waypoint(function() {
        $('#graph1, #graph2, #graph3').circliful()  
    },
    {
        offset: 'bottom-in-view',
        triggerOnce: true
    });
});

任何可以帮助我的人？

Answer 1

这就是我如何使用它。可能不是最好的方法，但它有效。

我创建了一个函数，用于检查图表是否已进入视图，当用户向下滚动页面时触发该图表。一旦图表在视图中，我调用该函数绘制图表。我在那里添加了一个bool，以防止它一遍又一遍地绘制。

$(function(){
    var isGraph1Viewed=false;

    $(window).scroll(function() {   
       if(isScrolledIntoView($('#graph1')) && isGraph1Viewed==false){$('#graph1').circliful();isGraph1Viewed=true;}
    });

    function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height() - 20; //the 20 is the amount pixels from the bottom to consider the element in view
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
    }
});

我打算为你调整它，但是没有CDN用于circliful，但是如果你需要一个有效的例子，请告诉我，我可以把它放在我自己的网站上。

Answer 2

只是修改杰米的答案。如果您有多个具有相同类的图形，并且当文档准备就绪时它们可能在视图中，那么这应该有效...

$('.circles').each( function() {
    var $this = $(this);
    var isGraph1Viewed=false;
    $(document).ready(function() {
        if(isScrolledIntoView($this) && isGraph1Viewed==false){$this.circliful();isGraph1Viewed=true;}
    });
    $(window).scroll(function() {
        if(isScrolledIntoView($this) && isGraph1Viewed==false){$this.circliful();isGraph1Viewed=true;}
    });
});

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height() - 20; //the 20 is the amount pixels from the bottom
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}

使用航路点触发环路

2 个答案: