Question

我将在前言中说我是初学者而且我的代码可能非常混乱和/或语无伦次，但我会发布它，希望能够捕获这些错误。

我已经搜索了几天的答案和解决方案，我也找到了这个话题，有人在这里问完全相同的问题： http://goo.gl/BwLzp （视为含糊不清）所以我会像我所知道的那样彻底。

到目前为止，我还有一些教程和摘录的组合：

概念：（大量图像将被预先加载并设置为背景图像。理论上，对于滚动的每个整数（scrollTop），背景图像会相应地改变。）

所有图像基本上都命名为：imgname1.jpg，imgname2.jpg，imgname3.jpg等。所以“imgname”与scrollTop编号配对。

以下是我对滚动（不是预加载）的看法：

$(function getPos() {
    var Pos = $(window).scrollTop();  // "Pos = scrollTop and is added onto imgname
return Pos;
}); 

$(function() {

$(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving 

    var image_url = 'http://www.examplehost.com/imgname' + Pos + '.jpg'

    if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

        $("body").css('background-image', image_url);                            
    }


    else { //If the vertical position of scrollbar is at 1 display start image
        $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
    }

});

}); //function ends

我不知道这是多么混乱，是的，我会在基础知识上进行梳理，因为它在我的脑海中是合乎逻辑的，但我完全错了。对于这个项目，但是我的知识只限制我猜测/想知道以下内容：

当函数结束时，我的“}”之后是否需要逗号？例如：}，
一切都正常打开和关闭。
这正是我的js文件看起来如何，如果有错误调用函数的问题我也不会感到惊讶。
也代替if（getPos（）＆gt; 1）我想使用if（getPos（）＆gt; = 1）

可能有助于/进一步澄清的额外信息，目标是图像位置保持不变，并且每个滚动增量都会接管一个新的“框架”。最终，我会将图像全屏保持为全屏，例如：http://www.powersmart.ca/

感谢您阅读本文，如果我违反了规则，或者如果这个问题/难题在我无法找到的地方进一步详细解决，我会道歉。

那说，想法？

Answer 1

尝试改变这一点：

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', image_url);                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
}

为：

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', 'url('+image_url+')');                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', 'url(http://www.examplehost.com/imgname/0.jpg)');
}

Answer 2

要使“背景图像位置保持静止”，您需要object.style.backgroundAttachment="fixed"

与jquery有关：

$("body").css('background-attachment', 'fixed');

虽然我建议把它放在你的CSS中

body { 
    background-attachment: fixed;
}

http://www.w3schools.com/cssref/pr_background-attachment.asp

Google是你的朋友;）

编辑：只是提出一件事，你确定图片是正确的网址吗？如果网址错误，则根本不会产生任何背景。

Answer 3

function getPos() {
    var Pos = $(window).scrollTop();
    return Pos;
}
$(function() {
      $(window).scroll(
       function() {
        var here=getPos();
        //alert(here);
        $("body").css('background-image', url('http://www.examplehost.com/imgname' + here + '.jpg')); 
      })
});

从这开始。但是每个像素需要一个图像...

jQuery / javascript：background-image，滚动更改

3 个答案: