1

CSS3アニメーションを使用して、相対的な位置にある要素の画面上にコンテンツを配置する場合

-moz-transform: translate(125px, 5px);

javascriptを使用してアイテムの位置を尋ねると、アイテムがまだ残っていることが報告されます

top:0
left:0

たとえば、jQueryIsotopeプラグインを使用するこの例の要素の位置を見てください。

http://isotope.metafizzy.co/demos/basic.html

このようなjQuerycss（）メソッドを使用する必要がありますか？それがうまくいくかどうかさえわかりません！

$(element).css('-moz-transform')

アップデート：

この例をJsFiddlehttp://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>
4

2 に答える 2

1

オプションセットitemPositionDataEnabled: trueで。次に、 で値を取得します.data('isotope-item-position')。http://isotope.metafizzy.co/docs/options.html#itempositiondataenabledを参照してください。

.offset()Isotope は配置に CSS3 変換を使用するため、機能しgetComputedStyleません。別の解決策は、 を使用して変換を無効にすることtransformsEnabled: falseです。

于 2012-02-02T22:28:08.847 に答える
0

jQuery のオフセット関数を使用すると、相対位置が得られます。正確な位置が必要な場合は、コンテナ要素の正確な位置を取ることができます。したがって、コードは次のようになります。

var off = $("div.element[data-symbol='Ca']").offset();
var containPos = $("#container").position();

var totalTop = off.top + containPos.top;
var totalLeft = off.left + containPos.left;

console.log(totalTop);
console.log(totalLeft);
于 2012-02-01T13:36:02.360 に答える