使用浏览器的滚动条控制图像移动

Question

我想通过路径引导图像。向下滚动浏览器应该将图像放在路径上，向上滚动浏览器应该使图像追溯到它的路径。

以下是我想要实现的示例：

当用户向下滚动页面上的文章时，我想在路径上引导该错误，并在用户向上滚动时使其回溯路径（错误的头部始终是运动方向）。

如何使用jQuery和javascript实现这一目标？

Answer 1

您需要计算要使用的路径，然后将函数绑定到基于滚动距离移动图像的滚动事件，如：

$(window).on('scroll', function(e) {
    var S = $(this).scrollTop(),                // scrolled distance
        T = 10 + (S/24),                        // value for Top
        L = 10 + Math.abs(Math.sin(S/400)*50);  // value for Left

    $("img").css({top: T+'%', left: L+'%'});    //set CSS
});​

FIDDLE

Answer 2

我不相信你可以单独使用javascript或jquery直接捕获mouses滚动。因为它适用于浏览器的一部分，以及“窗口”内部。但是，您可以捕获滚动事件。基于窗户高度/宽度。它需要通过javascript进行一些计算才能构建一个可靠/稳定的方程式，该方程式适用于所有分辨率的所有浏览器。我不打算在这里详细讨论细节，因为你的问题相当含糊，并且没有提供要解决的问题而不是听起来像是对答案的要求。

但您可能想要做的事情的本质是，获取窗口/身体的宽度/高度。通过烟雾和镜子的一些技巧，或者在这种情况下HTML和CSS以及在一个彼此之上正确布置一堆图层，创建一个长达一英里的页面，带有隐藏的滚动条，你有2层顶部一个充当你的“路径”，另一个充当你的形象..当从a点滚动到点b时，通过页面的滚动事件跟踪它，一直到一英里长。然后使用具有宽度/高度的耦合进行调整，使其在任何给定点都不会在屏幕上运行（少于你想要的那样）。