javascript - jQuery/javascript : background-image, 滚动变化

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()>=1) 而不是 if (getPos()>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)');
}