Javascript 滚动事件背景更改

我正在尝试添加一个滚动事件，它将改变一个div的背景，这个div也作为窗口背景（它有100%的宽度和高度）。这就是我能做到的。我不太擅长jquery。我看过关于单击事件侦听器的教程。但应用同样的概念，比如，将scroll事件返回为false，我将一事无成。我还看到了一个关于SO的教程，其中有人建议使用数组。但是我对使用数组感到非常困惑（主要是因为语法）

我知道像

waypoints.js

和

skrollr.js

这样的插件可以使用，但我需要更改大约50-60个（为了在滚动时播放视频的错觉）。。。但这是不可行的

以下是我使用的代码：-

*
{
    border: 2px solid black;
}

#frame
{
    background: url('1.jpg') no-repeat;
    height: 1000px;
    width: 100%;
}

</style>

*
{
边框：2件纯黑；
}
#框架
{
背景：url（'1.jpg'）不重复；
高度：1000px；
宽度：100%；
}

$（函数（）{
对于（i=0；i=$.scrolltop；i++）
{
$（“#frame”）.attr（'src'，'+i+'.jpg'）；
}
});

在for循环中，您正在设置

#frame

的

src

属性，但它是

div

而不是

img

因此，与此相反：

$("#frame").attr('src', ''+i+'.jpg');

试试这个：

$("#frame").css('background-image', 'url(' + i + '.jpg)');

要使用jQuery将滚动事件绑定到目标

元素

：

$('#target').scroll(function() {
    //do stuff here
});

$(window).scroll(function () {
    //do stuff here
});

要使用jQuery将滚动事件绑定到

窗口

：

$('#target').scroll(function() {
    //do stuff here
});

$(window).scroll(function () {
    //do stuff here
});

下面是jQuery

.scroll（）

的示例

更新：

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

<div id="frame"></div>

如果我理解正确，这里有一个你想要实现的

CSS:

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

<div id="frame"></div>

Javascript:

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

<div id="frame"></div>

HTML:

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

<div id="frame"></div>

进一步建议：

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

<div id="frame"></div>

---

我建议您更改主体的

背景图像

，而不是div。但是，如果必须使用

div

；然后最好在

窗口中添加一个resize事件侦听器，并在每次调整大小时设置/更新该div的高度。原因是,<代码>高度：100%

在任何浏览器中都无法正常工作。

我以前就做过，如果我是你，我不会将图像用作背景，而是使用普通的“img”标记将其前置到页面顶部，使用一些css确保它位于所有其他元素的后面。通过这种方式，您可以操纵图像的大小以更好地适应屏幕宽度。为了使背景尺寸正确，我遇到了很多问题

Html标记：

<body>
<img src="1.jpg" id="img" />
</body>

我不完全确定这是否是您想要做的，但基本上，当窗口滚动时，您将距离的值分配到页面顶部，然后您可以运行if语句来查看您是否是某个点。之后，只需简单地更改运行您想要运行的函数

如果你想提供一个你想改变图像的范围，那么你可以这样做，这样你就可以只在200到400的范围内运行一个函数，这个范围就是从页面顶部开始的距离

$(function(){

    var topPage = 0, count = 0;

    $(window).scroll( function() {
        topPage = $(document).scrollTop();

        if(topPage > 200 && topPage < 400) {
           // function goes here
           $('#img').attr('src', ++count +'.jpg');
        } 
    });
});

$（函数（）{
var-topPage=0，count=0；
$（窗口）。滚动（函数（）{
topPage=$（document.scrollTop（）；
如果（顶部>200和顶部<400）{
//函数在这里
$（'#img'）.attr（'src'，++count+'.jpg'）；
} 
});
});

你想在滚动鼠标时滚动

div

的背景，还是想像图像链一样改变背景（24图像/秒？）？我不想滚动

div

。。我想让它保持静止。。。但是div的背景应该改变。。当用户滚动时。。。例如，每滚动10像素，图像就会发生变化。。$（“#frame”）.scroll（function（）{var i=$（this.scrollTop（）；$（this.css（'background-image'，'url（'+i*100+'.jpg）；}）；当元素具有滚动条时，将触发

scroll

事件。没有滚动条的

div

不会触发此事件。当窗口没有垂直滚动条时，您的演示将无法工作：）好的，那么您是如何使用滚动事件更改图像的？您也可以放置此代码以调整img的大小，这将检查窗口的宽度和高度并调整图像的大小，它也会在任何时候更改窗口，尽管我只会调整宽度以保持img的纵横比：

$（窗口）。调整大小（函数（）{$（'#img'）。宽度（$（窗口）。宽度（））。高度（$（窗口）。高度（）；）}）在某种程度上，我试图复制此网站>