使用jquery从外部浏览器窗口中制作元素动画？

Posted 2023-05-08

【中文标题】使用jquery从外部浏览器窗口中制作元素动画？

【英文标题】：Make elements animate in from outside browser window with jquery?

【发布时间】：2011-06-21 12:24:39

【问题描述】：

你好，我想让一个元素从浏览器窗口外滑入视图——我的网页的可视 div 是 900 像素宽，是一个浮动在浏览器窗口中心的框。 （因此，如果浏览器窗口的宽度为 1100 像素，则我的 900 像素 div 的两侧都有 100 像素的空白空间。对于 1500 像素宽的浏览器窗口，两侧有 300 像素的空白空间，等等）

我想要的是让一个元素从侧面滑入，使其进入浏览器窗口，然后在浏览器窗口的内边缘和我的 900px 框的外边缘之间的空白处移动，然后进入框（要清楚，全部在一个连续的动作中）。

如果我只有一种大小的浏览器窗口，这很容易做到——我只需让元素动画左 -=500px 左右，但是，如果我的网站的查看者使用更大的屏幕，则元素将从空白区域内开始，而不是在浏览器窗口之外。

当然，我可以做一些像动画左-=1000px这样的事情，但这意味着屏幕较小的人只是在等待元素出现，因为它跨越了不存在的空间。浏览器窗口的现有区域。

所以，我的问题是，我可以告诉 jquery（或插件）做些什么来设置移动元素的起点就在浏览器窗口的可见边缘之外，而不管浏览器窗口的大小？ 谢谢！

【参考方案1】：

假设您知道飞入节点的宽度，将其设置为绝对位置，并将左侧设为节点宽度的负数。然后，您需要计算您希望节点动画的距离。确定浏览器的当前宽度，除以2，然后减去fly in节点的宽度除以2。这将是您希望节点结束的左侧位置。因此，它必须移动的总距离将是飞行节点的当前左侧位置添加到结束位置。用这个数字触发你的动画。这是一个例子：http://jsfiddle.net/brianflanagan/KtUEL/

【讨论】：

谢谢你，Brian，我查看了你的链接，这很有趣......我会看看我是否可以测试它并让它工作......

您好，请看一下这个测试页面，如果您不介意，请给我一个提示，说明您将如何实施您的解决方案。我有两个滑入的元素，一个从左侧滑入，另一个从右侧滑入。他们在我的页面内相遇，但不在中心...ianmartinphotography.com/test-site/index-left-right-10.html 现在，滚动条出现并在动画运行时在页面底部缩小。 （我只是让我的动画足够大，可以容纳 1920 像素的显示器。）使用您的解决方案会很好，这样就不会出现滚动条了......谢谢！

我应该说我在小于 1920px 的显示器上，这就是出现滚动条的原因...尚未在 1920px 显示器上测试过...

啊！溢出：隐藏在父 div 的 CSS 中，即 900px 的那个——不再有滚动条。

是的，你明白了。看起来不错，顺便说一句。

【参考方案2】：

在我看来，您真正想要的是知道页面宽度。看看这个页面，它会告诉你哪些浏览器支持哪些页面宽度属性：

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

【参考方案3】：

所以，我最终要做的只是为访问我网站的最大显示器创建一个足够宽的动画——根据谷歌分析，1920 像素。

在父 div 的 CSS #container 中，我添加了 overflow:hidden 以防止滚动条在动画运行时出现。

我想到的一件事（对其他人来说可能很明显）是动画的持续时间决定了动画元素在屏幕上移动的速度——所以，一个移动的元素需要 1100 毫秒才能跨越 10,000 像素或 1000 像素.意思是，元素移动的距离越远，它需要移动的越快。也许有一种说法：“以每小时 60 英里的速度行驶穿过这个区域。”相反，我们会说：“在这段时间内穿过这个区域，尽可能快地开车以准时到达。”

我将设置一个 cookie，以便该动画在每个会话中只播放一次。要再次运行它，需要清除 cookie“欢迎”，或者，必须退出并重新启动浏览器。在这个特定的测试页面上，cookie 被停用。 http://ianmartinphotography.com/test-site/index-left-right-10.html

【讨论】：

这是一个测试页面，其中元素必须在与我答案的测试页面中相同的时间内跨越大约 20,000 个像素 - 这一次，它们移动得更快。 ianmartinphotography.com/test-site/index-left-right-10-alt.html

【参考方案4】：

我必须将整个动画包含在一个宽度超过 1920 像素（我的典型访问者的最大屏幕尺寸）的 div 中，这样无论如何，动画元素都会通过从内部边缘滑入来显示屏幕分辨率为 1920 像素或更小的显示器上的浏览器窗口。在我之前的回答中，元素出现在 900px div 内。现在，我创建了一个 1930 像素宽的 div。而且，我在 body 样式中添加了 overflow:hidden 以消除水平滚动条。本周末将在 1920px 显示器上进行测试...

这是我实施了这些更改的最新测试页面：http://ianmartinphotography.com/test-site/index.html