2012-12-29 28 views
1
不同

fiddle here - 我们的目标是在滚动时,背景上做出一些透视效果。动画背景位置适用于浏览器

它正常工作在Chrome,在IE7,IE8,但是:

它的工作原理很奇怪的IE9(背景重置animation前的位置) 它不能在Mozilla和Opera(滚动工作,但位置工作背景不)

当鼠标滚轮事件被触发它的动画页面滚动和它的动画背景的位置移动略多于身体滚动,是什么给视角感受

+0

不知道这是否有关,但我确实只用垂直onscrollevent scrollcapture,http://jsfiddle.net/oceog/QrWSb/ –

回答

1

为了解决IE9(和Mozilla的问题,等等),从'background-posi'中删除'-x'重刑-X”。它不再被现代浏览器使用,因为它不是任何标准规范的一部分。如果你想用jQuery的动画方法改变背景位置,你必须包含BOTH X和Y属性。

$('div').animate({'background-position':'0px 50px'}); 
-OR- 
$('div').animate({'background-position':'50px 0px'}); 

背景位置-X背景位置-Y是CSS元素,微软在旧版本的IE来实现。谷歌的人喜欢这个想法,所以采纳了它。我相信,Chrome仍然会可以让你拆分的属性,但我不会吧:)最后算,而这与“不抱太大希望”的情景一起去,你不必包含“PX”与尺寸。有些元素不要求它为零值,但有些浏览器似乎需要它在JavaScript中。