使用滚动更改背景图像[关闭]

【问题标题】：change background image with scroll [closed]使用滚动更改背景图像[关闭]
【发布时间】：2023-04-08 09:32:01
【问题描述】：

我有一堆应该适合整个浏览器的图像，当您滚动时，它会更改为下一张图片，依此类推。我是新手，我真的不知道我在做什么。我一直在看这个：Create website background image that changes on a click 这基本上是我想要的，但不是在点击时改变，而是在滚动时改变。

不知道是不是同一个概念……有什么想法吗？

【问题讨论】：

你真的应该为这个模糊的问题添加更多信息。

标签： jquery image background scroll

【解决方案1】：

您可以使用 $(window).scrollTop() 确定当前滚动量和 $(body).css('background-image', '/i/image.jpg ') 实际更改背景图像。

$(window).scroll(function() {
    var image_url = '/i/image1.jpg'
    if ($(window).scrollTop() > 800) {
        image_url = '/i/image2.jpg';
    }
    $(body).css('background-image', "url('" + image_url + "')");
});

这只是一个概念。您应该将所有图像放在“数组”中（如您的示例中）并确定要动态应用的图像。

【讨论】：

我发现你需要在更改背景时添加'url()'部分。 $("body").css('background-image', 'url("'+image_url)+'")';
你是对的，我已经更新了答案。谢谢。