2010-04-21 5 views
1

J'essaye d'animer une toile sur trois calques différents sur onmousedown et ontouchstart. Les trois toiles vont de gauche à droite à une vitesse différente pour donner un effet de perspective tant que l'onmouseup ou l'ontouchend ne sont pas tirés.Get background-position

J'utilise @ -webkit-images clés css pour faire mes animations:

@-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; 
} 

Ce que je voudrais faire est d'obtenir la position de fond actuelle des trois couches avant de désactiver l'animation poêle et eux manuellement alors quand je supprime la classe .cars_move_right de mon div est reste dans la même position au lieu de revenir à sa position par défaut.

Existe-t-il un moyen d'obtenir la position d'arrière-plan ou juste un travail pour obtenir ce que je veux? La page est destinée à l'iPhone et à l'iPod Touch.

Merci!


J'ai trouvé quelque chose d'intéressant. Au lieu de saisir la position d'arrière-plan, arrêtez l'animation et réglez la position d'arrière-plan sur mes divs, je fais une pause dans l'animation.

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

Nous n'avons pas encore eu l'occasion de le tester sur votre iPhone.


Et, voici une méthode qui semble fonctionner contre-browswers pour obtenir des biens: window.getComputedStyle (document.getElementById ('div')) [ '-position d'arrière-plan'];

Répondre

0

Je trouve que je peux l'utiliser pour obtenir la propriété que je ne pouvais pas obtenir avec [mydiv] .style. [Propriété]

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

Avez-vous essayé: var blah = ele.style.backgroundPosition;

qui lui revenir comme « 10px 57px »

Si la règle css a un trait d'union il alors en Javascript afaik le trait d'union est enlevé et cas de chameau appliqué.

+0

Oui, j'ai essayé déjà. Pour certaines raisons, obtenir des propriétés d'arrière-plan (background et backgroundPosition, en fait) ne fonctionne pas dans tous les cas, ce que je n'ai pas encore réussi à définir. La fonction getComputedStyle fonctionne très bien. – Stef