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

我想实现使用jQuery的滚动效果。我有一个背景div设置为100％浏览器窗口大小与溢出隐藏。这有一个大的背景图像，大约是。 1500px x 2000px。jQuery在窗口滚动动画背景图像的位置

我想要的效果是，当用户向下滚动页面时，背景图像以滚动距离的百分比移动，所以对于每200px向下滚动页面，图像将以相同方向移动10px。

任何人都可以指向正确的方向吗？这甚至有可能吗？：）提前谢谢了。

UPDATE

因为由奥的斯@Capt的建议，尝试变化我有，但我仍然在努力，我玩弄如下代码：

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

任何人都可以摆脱任何光线我做错了什么？

来源

2011-02-15 mtwallet

在这里你去。背景设置为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/

来源

2011-02-21 09:36:23 Hussein

@Hussien尝试了你的建议（非常感谢！），但尚未开始工作。我注意到jsfiddle你使用的jQuery UI我还没有。这取决于哪个部分，是它的位置？ – mtwallet 2011-02-21 10:12:27

查看here查看用户在页面上滚动多远的示例。请参阅$(this).scrollTop()？

而不是引用$（this），尝试使用背景div。然后使用.scroll函数来确定移动背景的多少。

你的代码看起来应该有点像这样：

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

来源

2011-02-15 08:55:20

我不认为你可以使用+ =或 - =当你有两个部分的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点。然后它将动画分割到新的位置。

来源

2011-02-17 11:56:32 Cokegod

感谢您的回复。我已经尝试过这段代码的不同版本，但是我不敢让它正常工作。 – mtwallet 2011-02-18 15:42:06

这可能做到这一点：

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

来源

2011-02-19 12:08:30 Gareth

这为我工作：

在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是其背景图片我想提出的股利。无需有身高：100％的HTML，身体。

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

来源

2012-03-14 12:59:20 stormwild

如果你不想用额外的背景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; 
}

来源

2013-04-30 21:35:25 breez

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

回答

相关问题