2012-12-29 30 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中。