1

由于在不同浏览器中让背景延伸到整个页面的问题，我不得不使用带有图像的 div 来覆盖页面。

我想要做的是让这个图像根据一天中的时间而改变。当我在 CSS 中使用更传统的 background-image 属性时，它工作得很好，但是我在将其转换为更改图像的 src 属性时遇到了问题。

图片的id是#bg。我可能会犯语法错误，但任何帮助都会很棒，谢谢！

$('document').ready(function(){

 var hours = getDayTime(new Date().getHours());

if (hours > 20 || hours < 5) {
    $('#page-background > img').prop('src', 'backgrounds/night.jpg')
}    

else if (hours > 17) {
    $('#page-background > img').prop('src', 'backgrounds/dusk.jpg')
}    

else if (hours > 8) {
    $('#page-background > img').prop('src', 'backgrounds/day.jpg')
}

else { 
    $('#page-background > img').prop('src', 'backgrounds/dawn.jpg')
}
});


<div id="page-background"><img src="backgrounds/day.jpg" width="100%" height="100%" alt="" id="bg" /></div>
4

5 回答 5

2 
$('#bg img').attr('src', 'backgrounds/night.jpg')

应该只是

$('#bg').prop('src', 'backgrounds/night.jpg')

由于您id已经指定了图像的 ，因此无需包含img. 并且.prop()比attr()jQuery 1.6更受欢迎

于 2012-05-30T17:11:26.127 回答
2

如果它是 ：

<img src="someimage.jpg" id="bg" />

然后是：

$('#bg').attr('src', 'backgrounds/night.jpg')
于 2012-05-30T17:12:06.733 回答
1

这是针对您的问题的另一个更实用的解决方案：

$("#bg").attr("src", function(i, value) {
    var src = "backgrounds/";

    if (hours > 20 || hours < 5) src += "night.jpg";
    else if (hours > 17) src += "dusk.jpg";
    else if (hours > 8) src += "day.jpg";
    else src += "dawn.jpg";

    return src;
});

是的，你必须使用#bg选择器，因为这是图像本身。

于 2012-05-30T17:13:43.920 回答
1 
$('#bg').attr('src', function() {
    var src = 'backgrounds/dawn.jpg';
    if (hours > 20 || hours < 5) {
        src = 'backgrounds/night.jpg';
    } else if (hours > 17) {
        src = 'backgrounds/dusk.jpg';
    } else if (hours > 8) {
        src = 'backgrounds/day.jpg';
    }
    return src;
})
于 2012-05-30T17:14:22.923 回答
1

你可能应该使用

$('#bg')

代替

$('#bg img')

在第二种情况下，您将选择元素#bg 下的所有IMG 元素。

于 2012-05-30T17:11:26.200 回答