我正在使用 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
});
最佳答案
// 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/
那么这里发生了什么:
旋转图像的 CSS 代码存储在一个特殊的 CSS 类中。我这样做是因为我想读取图像的原始位置(在旋转之前)。读取原始位置后,我应用
.rot
类,然后再次读取位置以计算差异(delta),它存储在元素的 data() 中。现在,我可以通过自定义方法
adjustedPosition
(已在上面定义)读取位置。此方法将读取元素的位置,然后减去存储在元素的 data() 中的增量值。要写位置,只需像往常一样使用
css(pos)
方法。
关于javascript - 使用 CSS3 旋转属性时 jQuery .position() 奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5078897/