jQuery .position（）陌生的使用CSS3旋转属性 [英] jQuery .position() strangeness while using CSS3 rotate attribute

问题描述

我使用jQuery .position（）方法获得绝对定位的旋转元素位置，然后使用jQuery设置位置相关属性（顶部，左侧） .css（pos），其中 pos 是 .position（）。我认为它会离开元素在它的地方，但元素的位置正在改变。

I'm getting absolutely positioned rotated elements position with jQuery .position() method, then setting position-related attributes (top, left) with jQuery .css(pos), where pos is the data returned by .position(). I think it'll leave the element in it's place, but elements position is changing.

如何使用设置的旋转元素位置，以便它会按预期放置？也许有一个系数取决于改变位置的角度？

How can I use set rotated elements position, so that it'll be placed as expected? Maybe there is a coefficient depended on angle that changes position?

我在Google Chrome v.9，Windows XP中测试。

I'm testing in 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/

推荐答案

// 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），它存储在元素的数据（）

1. The CSS code that rotates the image is stored inside a special CSS class. I do this because I want to read the original position of the image (before rotating). Once I read that original position, I apply the .rot class, and then read the position again to calculate the difference (delta), which is stored inside the element's data().

现在，我可以通过自定义方法 adjustedPosition 。此方法将读取元素的位置，然后减去存储在元素的data（）中的增量值。

Now, I can read the position via the custom method adjustedPosition (which is defined above). This method will read the position of the element and then subtract the delta values stored inside the data() of the element.

要写入位置， css（pos）方法。

To write the position, just use the css(pos) method like normally.

这篇关于jQuery .position（）陌生的使用CSS3旋转属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！