javascript - 回転しながらdivの右上のオフセットを計算する

Question

divの右上の位置を計算したいのですが、次のように回転しない場合は計算できます。

  $("div").offset().top + $("div").width();

しかし、回転するdivと、どうすれば右上の位置を計算できますか？

コードを回転します：

$("div").slider({ 
   slide: function(e,u){ 
      $(this).rotate({ angle : u.value});  
   }
});

Answer 1

これをJavaScriptで使用してください

function getPosition(obj){
    var topValue= 0,leftValue= 0;
    while(obj){
    leftValue+= obj.offsetLeft;
    topValue+= obj.offsetTop;
    obj= obj.offsetParent;
    }
    finalvalue = leftValue + "," + topValue;
    return finalvalue;

}

var d = document.getElementById('divname');
getPosition(d);

次に、これを試してください。jqueryで.position（）関数を使用してください。これを使用してください

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
var p = $("div");
var position = p.position();
$("div").text( "Right: " + position.right + ", top: " + position.top );
</script>

Answer 2

あなたはこれを試すことができます：

JavaScript

$(".slider").slider({
    min: 0,
    max: 180,
   slide: function(e,u){ 
      $(this).rotate({ angle : u.value});
       calculateTopLeft(u.value);
   }
});

var pointer = $('.pointer');
var slider = $('.slider');
var center = { top: slider.offset().top, left: slider.offset().left + slider.width() / 2 };
var offset = slider.offset();

function calculateTopLeft(angle) {
    var radius = slider.width() / 2,
        radians = (angle * Math.PI) / 180;
    pointer.css({
        left: center.left + radius * Math.cos(radians),
        top: center.top + radius * Math.sin(radians)
    });
}
//Equation of the circle
//x = a + r * cos(t);
//y = b + r * sin(t);​

そしてここに例があります：http：//jsfiddle.net/zFRwM/2/

少し修正が必要かもしれませんが、考え方は明確だと思います。

Answer 3

変換を削除し、オフセットを取得し、変換を元に戻します。

$.fn.offsetNoTransform = function(e)
{
    var m = this.css('transform');
    this.css('transform', '');
    var off = this.offset();
    this.css('transform', m);
    return off;
}