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

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
});​

小提琴

Answer 2

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

但是您可能想要做的本质是获取窗口/主体的宽度/高度。通过烟雾和镜子的一些诡计，或者在这种情况下是 HTML 和 CSS，并正确地将一堆层相互叠加，创建一个一英里长的页面，带有一个隐藏的滚动条，上面有 2 层一个充当您的“路径”，另一个充当您的图像。当从点 a 滚动到点 b 时，通过页面的滚动事件跟踪其中一英里长的页面。然后使用该组合与找到的宽度/高度进行调整，使其不会在任何给定点跑出屏幕（这就是你想要的）。