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

【问题标题】：Controlling image movement using scroll bar of browser使用浏览器的滚动条控制图像移动
【发布时间】：2012-08-16 00:54:51
【问题描述】：

我想通过路径引导图像。浏览器向下滚动应使图像沿路径向下滚动，浏览器向上滚动应使图像回溯其路径。

这是我想要实现的示例：

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

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

【问题讨论】：

你能再描述一下你想要什么吗？到目前为止，您尝试过什么？
我有一张图片准确地描述了我想要的东西，但是这个网站不允许我上传任何带有问题的图片。@TrevorSenior
我已经尝试过使用像joelb.me/scrollpath 这样的插件，除了它之外的所有插件都可以达到目的。我只想通过自定义之字形路径引导图像。当我们向下滚动时，图像应该沿着路径向下滚动并在向上滚动时向上回溯路径。 @JohnKoerner
欢迎来到 Stackoverflow - 很快就会解除限制。同时链接 cmets 中的图像（如果您愿意，请上传到imgur）。这实际上是一个非常简洁的插件 - 现在阅读上面的 docs。
描述我的问题的图片：imgur.com/tPmw5 >我想在用户向下滚动页面上的文章时引导该错误！并使其在用户向上滚动时回溯其路径。（虫子的头总是朝着运动的方向）@TrevorSenior

标签： javascript jquery image scroll controls

【解决方案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

【讨论】：

非常感谢！这正是我一直在寻找的！但我的路径更像是曲折型的，不可能写出定义路径的数学方程式。有没有其他方法来定义路径？
是的，您可以将路径写为对象或数组，并使用滚动位置作为键来获取顶部/左侧的值，但这也需要一些计算，它会是一个长对象，用于覆盖从顶部（为零）到底部（通常为 800 左右）的所有数字。将 scrollTop 值除以窗口高度等将为您提供与屏幕尺寸相关的值，以使其对所有屏幕尺寸都相同，当您获得它时并不是那么难，所以稍微摆弄一下，记录scrollTop 值到控制台，看看发生了什么等。
@Nagendra - 哦，如果它对您有帮助，请考虑接受答案，因为我们喜欢这里的声誉点！

【解决方案2】：

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

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

【讨论】：