5

对于我目前正在设计的网站，我希望将身体背景放在一组图像的旋转上。我尝试了多种方法，即使用fadeIn() 和fadeOut() 函数，但它们似乎会影响体内分区的不透明度。我也尝试过使用bgStretcher但这会导致外观问题并使网站运行缓慢且不稳定。

我希望图像淡入淡出。帮助将不胜感激，

这是网站的链接 我目前一直在修改的脚本文件在/js/目录下叫做background.js。该文件目前已被注释掉，因为它只是实验性的。当前的两个背景图像是“images/bg/bg1.jpg”和“images/bg/bg2.jpg”

这是我正在尝试使用的当前代码：

$(document).ready(function() {
    setInterval(switchImage, 5000);
    switchImage();

});

function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}

一旦我弄清楚如何在背景图像之间转换，我就可以简单地添加一些条件来在一组图像之间进行更改。

干杯，戴恩·威尔逊

4

2 回答 2

7

使用这个 jQuery 插件非常简单：jQuery Backstretch 在演示“在幻灯片中使用 Backstretch”是它的代码片段。

于 2012-06-02T11:56:04.100 回答
0

这只能使用 css3 完成。我会尽快发布小提琴。

编辑：我尝试使用关键帧和 CSS3 的背景大小制作动画，但显然他们不想很好地协同工作（闪烁）。那么可能更好地研究jQuery。

于 2012-06-02T12:07:39.743 回答