0

我正在尝试添加一个滚动事件，该事件将更改 div 的背景，该 div 也充当窗口背景（它具有 100% 的宽度和高度）。这是据我所知。我不太擅长 jquery。我看过有关单击事件侦听器的教程。但是应用相同的概念，例如将滚动事件返回为 false，让我无处可去。我还看到了一个关于 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>
4

2 回答 2

1

在您的 for 循环中，您正在设置src属性 of#frame但它div不是img.

所以，而不是这个：

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

尝试这个：

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

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

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

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

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

这是jQuery的文档.scroll()。

更新：

如果我理解正确，这里有一个关于 jsFiddle的工作演示，说明您想要实现的目标。

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-imagebody ，而不是 div 。但是，如果您必须为此使用 a div；那么你最好添加一个调整大小事件监听器，window并在每次调整大小时设置/更新该 div 的高度。原因是; height:100%在任何浏览器中都无法按预期工作。

于 2013-01-19T16:52:55.210 回答
0

我自己之前已经这样做了，如果我是你，我不会使用图像作为背景，而是使用普通的“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');
        } 
    });
});
于 2013-01-19T17:08:08.643 回答