我试图使用jQuery来实现滚动效果。我有一个背景div设置为100％浏览器窗口大小与溢出隐藏。这有一个大的背景图像是大约。 1500px x 2000px。
我想要的效果是当用户向下滚动页面时，背景图像以滚动距离的百分比移动，因此对于每个200px滚动的页面，图像以相同的方向移动10px。
任何人都可以指向正确的方向吗？这是甚么可能吗？ ： ) 提前谢谢了。
UPDATE
我已经尝试了@Capt Otis的建议，但我仍然在努力，我正在玩的代码如下：
$(window).scroll(function(){
if($(this).scrollTop() > 200) {
$('#div').animate({'background-postion': '+=10px 0'},500);
}
});
任何人可以看出我做错了什么吗？
解决方法
干得好。背景设置为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/
