Question

我正在尝试在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;
}

我想要做的是在禁用平移动画之前获取三个图层的当前背景位置并手动设置它们，这样当我从我的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'））[ '背景位置'];

Answer 1

你试过了吗？ var blah = ele.style.backgroundPosition;

这会像“10px 57px”

那样返回

如果css规则中有一个连字符，那么在Javascript中afhenk将删除连字符并应用驼峰案例。

Answer 2

我发现我可以用它来获得[mydiv]。风格无法获得的属性。[property]

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

获得背景位置

2 个答案: