Question

这个标题非常简单，但是我一直在努力解决这个问题很长时间才能想出一种雄辩的方式来实现它。

所以，我所拥有的是我工作的公司的活动时间表。一切都很好，除了滚动页面后面的SVG。我们目前有一个工作版本，但它需要太多的代码行让我满意。我重写它约150行到这个..

function drawLines() {
    $.each($("path"), function (i, val) {
        var line = val;
        drawLine($(this), line);
    });
}

function drawLine(container, line) {
    var length = 0;
    var pathLength = line.getTotalLength();
    var distanceFromTop = container.offset().top - $(window).scrollTop();
    var percentDone = 1 - (distanceFromTop / $(window).height());
    length = percentDone * pathLength;
    line.style.strokeDasharray = [length, pathLength].join(' ');
}

在页面上被调用..

$(window).scroll(function () {
    drawLines()
});

这是因为它在页面滚动上绘制线条很棒。但是我有一些div，当它们位于屏幕底部上方的设置位置时会生成动画，这是由...处理的。

$('.changeL').each(function () {
        if ($window.scrollTop() >= ($(this).offset().top - ($window.height() / 1.1))) {
            $(this).css({ 'left': '0', 'float': 'right' });
        }
        else {
            $(this).css({ 'left': '-1000px' });
        }
    });

我想要的是SVG由上面的函数控制，比如$('path).each(function...，所以在div生成动画的同时绘制直线。

希望这是有道理的，有人可以帮助我，因为我完全不知道如何处理这一切。

提前致谢

使用滚动在设定点绘制SVG

0 个答案: