2010-04-21 60 views
1

我試圖在onmousedown和ontouchstart上的三個不同圖層上畫一個畫布。只要不打開onmouseup或ontouchend,三個畫布以不同的速度從左到右進行透視效果。獲取背景位置

我正在使用@ -webkit-關鍵幀的CSS做我的動畫:

@-webkit-keyframes aCarsRight 
{ 
from{background-position: 0px 0px;} 
to{background-position: 640px 0px;} 
} 

.cars_move_right 
{ 
-webkit-animation-name: aCarsRight; 
-webkit-animation-duration: 5s; 
-webkit-animation-iteration-count: 1; 
-webkit-transition-timing-function: linear; 
} 

我想這樣做的就是三層的當前背景位置之前禁用泛動畫和設置他們手動,所以當我從我的div刪除.cars_move_right類是停留在相同的位置,而不是回滾到其默認位置。

有沒有辦法獲得背景位置或只是一個工作,得到我想要的?該頁面適用於iPhone和iPod Touch。

謝謝!


我發現了一些有趣的東西。不要抓住背景位置,停止動畫並將背景位置設置爲我的div,我暫停動畫。

document.getElementById('global').style.webkitAnimationPlayState = 'paused'; 
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused'; 
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused'; 

還沒有機會在iPhone上測試它。


而且,這裏,似乎工作的跨browswers得到任何財產的方法: window.getComputedStyle(的document.getElementById( 'DIV')) '背景位置'];

回答

0

我發現我可以用它來得到我無法[mydiv] .style獲得的財產。[屬性]

function getProperty(property, div) 
{ 
    return window.getComputedStyle(document.getElementById(div))[property]; 
} 
0

你試過了嗎: var blah = ele.style.backgroundPosition;

,將返回它像「10px的57px」

如果CSS規則,它有一個連字符,然後AFAIK JavaScript中的連字符被刪除,應用駱駝。

+0

是的,我試過了。出於某些原因,獲得背景屬性(背景和背景位置,實際上)在所有情況下都不起作用,但我還沒有弄明白。 getComputedStyle函數雖然工作得很好。 – Stef 2010-05-06 14:14:00