Получить фоновую позицию

Я пытаюсь анимировать холст на трех разных слоях на onmousedown и ontouchstart. Три холста движутся слева направо с разной скоростью, чтобы создать эффект перспективы, пока не срабатывает onmouseup или ontouchend.

Я использую @-webkit-keyframes 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;
}

Что я хотел бы сделать, так это получить текущую фоновую позицию трех слоев до отключения анимации панорамирования и установить их вручную, поэтому, когда я удаляю класс .cars_move_right из моего div, он остается в той же позиции, а не откатывается к своему положение по умолчанию.

Есть ли способ получить фоновую позицию или просто обойти, чтобы получить то, что я хочу? Страница предназначена для iPhone и iPod Touch.

Спасибо !

Я нашел кое-что интересное. Вместо того, чтобы захватить фоновую позицию, остановить анимацию и установить фоновую позицию для моих div, я приостанавливаю анимацию.

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

На айфоне пока не пробовал.

А вот метод, который работает в разных браузерах для получения любого свойства: window.getComputedStyle(document.getElementById('div'))['background-position'];


iphone html css webkit
person Stef    schedule 21.04.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы пробовали: var blah = ele.style.backgroundPosition;

Это вернет его как «10px 57px»

Если в правиле css есть дефис, то afaik в Javascript дефис удаляется и применяется верблюжий регистр.

person Quiche_on_a_leash    schedule 29.04.2010
comment
Да я это уже пробовал. По некоторым причинам получение свойств фона (на самом деле background и backgroundPosition) не работает во всех случаях, которые я еще не смог зафиксировать. Однако функция getComputedStyle прекрасно работает. - person Stef; 06.05.2010

arrow_upward
0
arrow_downward

Я обнаружил, что могу использовать это, чтобы получить свойство, которое я не мог получить с помощью [mydiv].style.[property]

function getProperty(property, div)
{
    return window.getComputedStyle(document.getElementById(div))[property];
}
person Stef    schedule 11.01.2011