2

我会先说我是初学者，我的代码可能杂乱无章和/或不连贯，但无论如何我都会发布它，希望能发现这些错误。

我已经搜索了几天的答案和解决方案，我还在这里找到了有人问完全相同问题的主题：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/

感谢您阅读本文，如果我违反了规则，或者这个问题/困境已在我无法找到的地方得到更详细的解决，我深表歉意。

也就是说，想法？

4

3 回答 3

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)');
}
于 2012-11-10T01:36:24.900 回答
0

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

与jQuery有关：

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

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

body { 
    background-attachment: fixed;
}

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

谷歌是你的朋友；）

编辑：只是提出一件事，你确定图片的网址是正确的吗？如果 URL 错误，将导致根本没有背景。

于 2012-11-10T01:32:33.113 回答
0 
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')); 
      })
});

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

于 2012-11-10T01:54:16.303 回答