javascript - 使用 CSS3 旋转属性时 jQuery .position() 奇怪

Question

我正在使用 jQuery 获得绝对定位的旋转元素位置 .position()方法，然后使用 jQuery 设置与位置相关的属性(顶部、左侧).css(pos) , 其中pos是.position()返回的数据.我认为它会将元素留在原处，但元素位置正在改变。

如何使用设置旋转元素的位置，使其按预期放置？也许有一个系数依赖于改变位置的 Angular ？

我正在 Google Chrome v.9、Windows XP 中进行测试。

HTML

<div id="container">
  <div id="element"> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0Fawya9MVMez80ZusMVtk_4-ScKCIy6J_fg84oZ37GzKaJXU74Ma0vENc"/>
  </div>
</div> 

CSS

#container {
    position: relative;   
    border: 1px solid #999;
    padding: 5px;
    height: 300px;
    width:300px;
}    
#element {
    position: absolute;
    top:50px;
    left: 60px;
    width: auto;
    border: 1px solid #999;
    padding: 5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

JS

$(document).ready(function(){
    var $el = $('#element'),
    // getting position    
        pos = $el.position();
    alert(pos.left + '/' + pos.top);
    // alerts 37/11

    // setting css position attributes equal to pos
    $el.css(pos);
    // re-getting position
    pos = $el.position();
    alert(pos.left + '/' + pos.top);
    // alerts 14/-28
});    

查看http://jsfiddle.net/Antaranian/2gVL4/

Answer 1

// Needed to read the "real" position
$.fn.adjustedPosition = function() {
    var p = $(this).position();
    return {
        left: p.left - this.data('dx'),
        top: p.top - this.data('dy')
    }
};

---

$(function() { 

    var img = $('img'),
        pos;

    // Calculate the delta
    img.each(function() {
        var po = $(this).position(), // original position
            pr = $(this).addClass('rot').position(); // rotated position

        $(this).data({
            dx: pr.left - po.left, // delta X
            dy: pr.top - po.top // delta Y
        });
    });

    // Read the position
    pos = img.adjustedPosition();    
    alert(pos.left + '/' + pos.top);     

    // Write the position
    img.css(pos);

    // Read the position again
    pos = img.adjustedPosition();    
    alert(pos.left + '/' + pos.top);

});

现场演示: http://jsfiddle.net/2gVL4/4/

那么这里发生了什么:

1. 旋转图像的 CSS 代码存储在一个特殊的 CSS 类中。我这样做是因为我想读取图像的原始位置(在旋转之前)。读取原始位置后，我应用 .rot 类，然后再次读取位置以计算差异(delta)，它存储在元素的 data() 中。

2. 现在，我可以通过自定义方法 adjustedPosition(已在上面定义)读取位置。此方法将读取元素的位置，然后减去存储在元素的 data() 中的增量值。

3. 要写位置，只需像往常一样使用css(pos) 方法。