[英]calculating the top-right offset of div while rotating it
我想計算div的右上角位置,我可以計算它,如果它沒有旋轉:
$("div").offset().top + $("div").width();
但是當我們旋轉div
時,我們如何計算出右上角的位置?
旋轉代碼:
$("div").slider({
slide: function(e,u){
$(this).rotate({ angle : u.value});
}
});
在你的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>
你可以試試這個:
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/
可能你需要一點修改,但我認為這個想法很清楚。
刪除變換,檢索偏移,放回變換:
$.fn.offsetNoTransform = function(e)
{
var m = this.css('transform');
this.css('transform', '');
var off = this.offset();
this.css('transform', m);
return off;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.