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

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 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

Answer 4

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

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