如果您使用 CSS3 动画在屏幕上定位相对位置的元素
-moz-transform: translate(125px, 5px);
当您使用 javascript 询问项目位置时,它会报告该项目仍在
top:0
left:0
例如,看看这个使用 jQuery Isotope 插件的例子中元素的位置:
http://isotope.metafizzy.co/demos/basic.html
我必须像这样使用 jQuery css() 方法吗?我什至不知道这是否会奏效!
$(element).css('-moz-transform')
更新:
我在 JsFiddle http://jsfiddle.net/uQtur/3/上发布了一个示例
JS
var elements = $('.element').each(function(i, e){
var el = $(this);
var position = el.position();
var offset = el.offset();
console.log('position', position);
console.log('offset', offset);
var positionLeft = window.getComputedStyle(el.get(0), null).getPropertyValue('left');
var positionTop = window.getComputedStyle(el.get(0), null).getPropertyValue('top');
console.log('computed position left', positionLeft);
console.log('computed position top', positionTop);
var transform = el.css('-moz-transform');
console.log(transform);
// > matrix(1, 0, 0, 1, 340px, 10px)
});
HTML
<div id='container'>
<div class='element' style='left: 0px; top: 0px; -moz-transform: translate(10px, 10px);'>
H
</div>
<div class='element' style='left: 0px; top: 0px; -moz-transform: translate(120px, 10px);'>
He
</div>
<div class='element' style='left: 0px; top: 0px; -moz-transform: translate(230px, 10px);'>
He
</div>
<div class='element' style='left: 0px; top: 0px; -moz-transform: translate(340px, 10px);'>
He
</div>
</div>