Question

我正在尝试添加一个滚动事件，它将改变div的背景，它也可以作为窗口背景（它有100％的宽度和高度）。这是我得到的。我不太擅长jquery。我见过有点击事件监听器的教程。但是应用相同的概念，比如，将滚动事件作为错误返回，让我无处可去。我也看到了一个关于SO的教程，其中有人建议使用数组。但我对使用数组感到非常困惑（主要是由于语法原因）。

我知道可以使用waypoints.js和skrollr.js之类的插件但我需要更改大约50-60（因为滚动时播放视频的错觉）...但它不会是可行的。

这是使用的代码： -

*
{
    border: 2px solid black;
}

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

</style>

<script>

$(function(){

for ( i=0; i = $.scrolltop; i++)
{
    $("#frame").attr('src', ''+i+'.jpg');
}

});

</script>

<body>

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

</body>

Answer 1

在for循环中，您设置的src属性为#frame，但它是div而不是img。

所以，而不是：

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

试试这个：

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

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

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

使用jQuery将滚动事件绑定到 window ：

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

以下是jQuery .scroll()的{{3}}。

<强>更新

如果我理解正确，这是您想要实现的 documentation 。

<强> 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. */
}

<强>使用Javascript：

$(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] + ')');
}

<强> HTML：

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

进一步建议：

我建议您更改正文的background-image，而不是div。但是，如果您必须为此使用div;然后你最好在window添加一个调整大小 event-istener，然后用每个调整大小设置/更新该div的高度。原因是; height:100%在任何浏览器中都无法正常工作。

Answer 2

我之前已经做过这个，如果我是你，我不会将图像用作背景，而是使用普通的“img”标记将其添加到页面顶部使用一些css以确保它保持在所有其他元素下的背面。这样，您可以操纵图像的大小以更好地适应屏幕宽度。我遇到了很多问题，试图让背景大小正确。

Html标记：

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

脚本代码：

$(function(){

    var topPage = 0, count = 0;

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

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

我不完全确定这是否是你要做的事情但基本上，当滚动窗口时，你将距离的值分配到页面的顶部，然后你可以运行一个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');
        } 
    });
});

滚动事件背景更改

2 个答案: