Question

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

<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/

Answer 1

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

Answer 2

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

function setBackground() {

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

    setTimeout( setBackground, 1000 );

}

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

Answer 3

正如另一位用户提到的，您可以尝试使用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/

根据时间设置背景

3 个答案: