Jquery - 背景图像 - 全宽画廊过渡

Question

我有一个简报要建立一个 swish B&B 网站 - 他们想要全宽背景图像，我使用媒体查询将其编码为封面图像，以节省在较小屏幕上加载较大图像的时间..

他们后来回复我说他们希望背景图像在每页上的多个图像中旋转。我想延迟加载背景图像并每 15 秒左右创建一个漂亮的过渡，但我不确定采取的最佳方法或如何做到这一点并且仍然使用媒体查询 - 有没有人有任何经验类似的，或者可以就一个好的方法提供任何建议？

它需要跨浏览器（ie8 plus）工作，理想情况下带宽使用有限..

干杯 保罗

Answer 1

如果您需要此功能与 IE8 兼容，那么您不能使用媒体查询，因为它是 CSS3 并且 IE8 无法处理它。

您可以做的是使用 jQuery 动画，使用图像不透明度来产生过渡。你可以在这个网站上看到一个这样的例子：http://www.mymms.co.uk/occasions/wedding.aspx 将鼠标悬停在左侧菜单项时，背景图像会发生变化。

这是为每个背景图像使用一个 div 制作的，所有 div 都显示在同一位置（叠加），然后将前景图像从 100% 不透明度淡化到 0% 不透明度，同时从0% 不透明度到 100% 不透明度；你可以得到很好的过渡，你甚至可以设置褪色时间： http://api.jquery.com/fadeTo/

您可能还需要相应地设置 z-index，以使 100% 不透明度的图像位于顶部。

此外，为了避免发生转换时的网络延迟，您必须在页面中放置标签，但不显示它们（显示：无）。这将预加载图像并提供流畅的过渡。

希望对你有帮助。