更改背景图片与滚动 [英] change background image with scroll

问题描述

我有一大堆，都应该以适应整个浏览器的图像和滚动时，它会改变为下一张照片等等。我是新来这个，我真的不知道我在做什么。我一直在寻找这个：<一href=\"http://stackoverflow.com/questions/10544270/create-website-background-image-that-changes-on-a-click\">Create上点击这就是我想要的，但而不是在一个不断变化的点击基本上改变网站的背景图片，它会改变一个卷轴。

I have a bunch of images that are supposed to fit the entire browser and when you scroll, it would change to the next picture and so on. I'm new to this and I really have no idea what I'm doing. I've been looking at this: Create website background image that changes on a click which is basically what I want, but instead of changing on a click, it would be changing on a scroll.

不知道这是否是同一个概念...任何想法？

Don't know if it's the same concept... any ideas?

推荐答案

您可以使用 $（窗口）.scrollTop（），以确定当前的滚动量和 $（体）的.css （背景图片，/i/image.jpg'）以实际更改背景图片。

You can use $(window).scrollTop() to determine current scroll amount and $(body).css('background-image', '/i/image.jpg') to actually change the background image.

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

这仅仅是一个概念。你应该把所有的图像阵列内（比如在你的例子），并确定图像动态地应用。

This is just a conception. You should place all your images inside an "array" (like in your example) and determine image to apply dynamically.

这篇关于更改背景图片与滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！