0

我有两张图片将作为页面的背景：

<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="background" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="h_background" alt="night" />

CSS 将隐藏一个并显示另一个：

#background {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}

#h_background {
width: 100%;
height: 100%;
display: none;
position: absolute;
z-index: -1;
}

javascript 应该检查现在几点并设置正确的背景。如果秒数 > 30，则使用一个背景。如果没有，请设置另一个。

function setBackground() {

if (secs > 30) {
    $('#h_background').attr('id', 'background');
    $('#background').attr('id', 'h_background');
}

else if (secs < 30) {
    $('#background').attr('id', 'h_background');
    $('#h_background').attr('id', 'background');
}

setTimeout(function() {setBackground()}, 1000);

}​

我想做的是在时间切换时添加到新背景的过渡。

目前，背景会自动切换，但不流畅。关于什么是实现这一目标的有效方法有什么想法吗？下面是完整的 jsfiddle，它显示了我到目前为止所拥有的内容。 http://jsfiddle.net/gkMVf/2/

4

3 回答 3

0

我会尝试css3 必须提供的不透明度。我会创建一个更可控的淡入淡出效果，以实现更平滑的过渡。一张图像的不透明度会逐渐增加，而另一张图像的不透明度会逐渐降低。

于 2012-11-12T18:07:59.090 回答
0

使用 jQuery，您可以使用 fadeIn 和 fadeOut 函数。

function setBackground() {

    if (secs > 30) {
        $('#h_background').fadeIn();
        $('#background').fadeOut();
    } else {
        $('#background').fadeIn();
        $('#h_background').fadeOut();
    }

    setTimeout( setBackground, 1000 );

}

这不依赖 CSS3 或 HTML5 这么好的浏览器兼容性。

于 2012-11-12T18:12:42.390 回答
0

正如另一位用户提到的，您可以尝试使用 CSS3 过渡。

像这样的一些CSS：

.background {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.background.hidden {
    opacity: 0;   
}

然后一些像这样的javascript：

setInterval(function() {
    $('.background').toggleClass('hidden');
}, 30000)​

你可以让它工作得更简单一些。试试 jsFiddle：http: //jsfiddle.net/gkMVf/3/

于 2012-11-12T18:14:19.530 回答