jQuery给予背景滚动的印象更慢 [英] jQuery to give impression of background scrolling slower
本文介绍了jQuery给予背景滚动的印象更慢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码，它只是为了给一个div的滚动速度比另一个更慢的印象，但是有一个问题，背景div滚动时一点点。
I have the following code which is just about working to give the impression of one div scrolling slower than the other, but there is a problem with the background div jolting a little when scrolling.
有什么想法为什么会发生这种情况，以及我该如何解决？
Any ideas why this is happening and how I might be able to fix it?
编辑：这看起来不是问题在所有浏览器，所以我想我现在正在寻找一个更安全的方式实现这种效果...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var divam = 1.2;
$(".sky").css({
"top":scrollTop/divam+"px",
"height":10000-(Math.round(scrollTop/divam))+"px"
});
});
});
</script>
<style type="text/css">
.sky {
height:10000px;
width:100%;
position:absolute;
top:0px;
left:0px;
background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
z-index:1;
}
.red {
height:10000px;
width:50%;
position:absolute;
top:0px;
right:25%;
background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg);
z-index:2;
background-position:center;
}
</style>
</head>
<body>
<div class="sky"></div>
<div class="red"></div>
</body>
推荐答案
您正在尝试实现视差滚动。我建议您查看一些文章，例如本教程和此文档。如果你需要任何更多的帮助，请问，我做了一些网站这个设计。
You are trying to achieve a 'parallax scrolling' effect. I recommend you take a look at a few articles such as this tutorial and this documentation. If you need any more help just ask, I've made a few site with this design.
这篇关于jQuery给予背景滚动的印象更慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
