1

我一直在努力尝试在滚动时更改背景图像。我尝试了发布到类似问题的解决方案,但到目前为止没有运气,它只会显示第一个背景图像。

基本上,我将背景设置为固定位置和几个 div,每个 div 的大小都是视口的大小,每个上边距都是视口高度的大小。换句话说,当滚动时,用户只有在滚动经过每个 div 后才能看到背景图像。我希望背景图像在他们滚动过去每个 div 后发生变化。

这是代码:

$(window).scroll(function() {
    var windowY = $(window).height();
    var scrolledY = $(window).scrollTop();
    var image_url = '/images/image1.jpg';

    if (scrolledY > windowY) {
        image_url = '/images/image2.jpg';
        }

    $('body').css('background', "url(" + img_url + ")");

});

提前致谢!

4

2 回答 2

0

你有两个错别字,括号然后是你的image_url变量名。最初你有:

$(body).css('background', "url(" + img_url) + "'";

改成:

$(body).css('background', "url(" + image_url + ")");

括号不正确,最终连接的字符串也是如此。此外,您的变量被声明为image_url,但在您css使用的函数中img_url

于 2013-04-01T05:29:20.577 回答
0

将调用更改为您的背景属性

$(window).scroll(function() {
    var windowY = $(window).height();
    var scrolledY = $(window).scrollTop();
    var image_url = '/images/image1.jpg';

    if (scrolledY > windowY) {
    image_url = '/images/image2.jpg';
    backgroundChange(image_url);
    }
});


function backgroundChange(img_url){
  $("body").css("background", "url(" + img_url + ")");
}
于 2013-04-01T05:33:40.763 回答