窗口滚动上的jQuery设置背景图像位置动画

我正在尝试使用jQuery实现滚动效果。我有一个背景div设置为100%浏览器窗口大小，溢出隐藏。这有一个大背景图像，约为1500px 2000px

我想要的效果是，当用户向下滚动页面时，背景图像以滚动距离的百分比移动，因此，每向下滚动页面200px，图像就会向同一方向移动10px

谁能给我指出正确的方向吗？这可能吗？：）非常感谢

更新

此后，我尝试了@Capt Otis建议的变体，但我仍在挣扎，我正在使用的代码如下：

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});     

有人能解释一下我做错了什么吗？

看看用户在页面上滚动了多远。请参阅

$（this）.scrollTop（）

不要引用$（this），请尝试使用background div。然后使用.scroll函数确定要移动多少背景

您的代码应该是这样的：

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});

---

当CSS中有两个部分时，我认为不能使用+=或-=。 你可以做一些事情，这有点棘手，但它是有效的：

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        var bgpos = $("#div").css("background-position");
        var bgposInt = 0;
        if(bgpos.indexOf("px")!=-1) {
            bgpos = bgpos.substr(bgpos.indexOf("px")+3);
            bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
        }
        bgposInt += 10;
        $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
    }
});

此代码仅获取div的背景位置（顶部位置）的第二个数字，将其转换为int，并将其增加10。然后它只是将div设置为新位置的动画。

这可能会做到：

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})

---

给你。背景设置为10%滚动。您可以通过更改代码中的10来更改背景滚动速率

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
}

<div class="bg">
   <span>..</span>
</div>

检查
单击此链接可查看全屏示例：

---

这对我很有用：

在js中：

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});

在css中：

#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;

其中#main是我想移动其背景图像的div。不需要有高度：100%的html，正文

---

这是多个背景图像的变体。

如果您不想被额外的背景div所困扰，下面是我从几个示例中总结出来的代码：

$(window).scroll(function () {
    setBackgroundPosition();
})
$(window).resize(function() {
    setBackgroundPosition();
});
function setBackgroundPosition(){
    $("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px");
}

跨浏览器问题需要Math.max。同时将“1920”替换为背景图像的宽度

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

---

谢谢你的回复。我已经尝试过这段代码的不同版本，但恐怕无法使用。@Hussien尝试过你的建议（非常感谢！），但还不能使用。我注意到在JSFIDLE上您使用的是jQuery UI，而我还没有。这取决于哪个部分，是位置吗？@mtwallet jQuery UI与代码无关。你可以不用它。当我使用jsfiddle时，我只是习惯性地将UI和jQuery都包括在内。@Hussien在这种情况下，我不确定我做错了什么。如果您不介意快速查看的话，我已经建立了自己的JSFIDLE@mtwallet您需要有

正文，html{height:100%；min height:100%；}

而不仅仅是正文。在这里查看@mtwallet Awesome，这是一种享受！非常感谢你的帮助。50分就要来了！：）

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}