我正在尝试使用 jQuery 实现滚动效果。我将背景 div 设置为 100% 浏览器窗口大小，并隐藏溢出。这有一个大的背景图像，大约是。 1500 像素 x 2000 像素。
我想要的效果是当用户向下滚动页面时，背景图像会以滚动距离的百分比移动，因此页面每向下滚动 200 像素，图像就会向同一方向移动 10 像素。
谁能指出我正确的方向？这甚至可能吗？ :) 非常感谢。
更新
我已经尝试了@Capt Otis 建议的变体，但我仍在苦苦挣扎，我正在使用的代码如下：
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
$('#div').animate({'background-postion': '+=10px 0'}, 500);
}
});
谁能解释我做错了什么？
【问题讨论】：
标签： jquery image background scroll jquery-animate
给你。背景设置为 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>
JavaScript
$('.bg').scroll(function() {
var x = $(this).scrollTop();
$(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});
在http://jsfiddle.net/Vbtts/查看工作示例
点击此链接查看全屏示例：http://jsfiddle.net/Vbtts/embedded/result/
【讨论】：
body, html{height:100%; min-height:100%;} 而不仅仅是身体。在这里查看jsfiddle.net/HFxVj/2
如果您不想被额外的背景 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;
}
【讨论】：
这对我有用：
在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。无需高度：html、body 为 100%。
这是多个背景图片的变体。
【讨论】：
这可能会做到：
$(window).scroll(function(){
$('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})
【讨论】：
查看here 以查看用户在页面上滚动了多远的示例。看到$(this).scrollTop()？
尝试使用背景 div，而不是引用 $(this)。然后使用 .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 动画到新位置。
【讨论】：