我正在将图像移动到另一幅图像上方,如果不应用任何类型的缩放,图像将移动到正确的位置,但如果我应用缩放,它永远不会移动到正确的位置。可能宽度和高度已更改
这是 jsfiddle
$( "#location-default-dropdown" ).change(function() {
var selection = $(this).val();
$obj = $('#dragable');
var MainImgwidth = $("#backgroundImg").width();
var MainImgheight = $("#backgroundImg").height();
var objWidth = $obj.width();
var objHeight = $obj.height();
//var objWidth = $obj[0].getBoundingClientRect().width;
//var objHeight = $obj[0].getBoundingClientRect().height;
var left = 0;
var top = 0;
if(selection == "TopLeft")
{
left = 0;
top = 0;
}
else if(selection == "TopCenter")
{
left = (MainImgwidth/2) - (objWidth/2);
}
else if(selection == "TopRight")
{
left = MainImgwidth - objWidth;
}
else if(selection == "CenterLeft")
{
top = ((MainImgheight/2) - (objHeight/2));
}
else if(selection == "Center")
{
left = ((MainImgwidth/2) - (objWidth/2));
top = (MainImgheight/2) - (objHeight/2);
}
else if(selection == "CenterRight")
{
left = MainImgwidth - objWidth;
top = (MainImgheight/2) - (objHeight/2);
}
else if(selection == "BottomLeft")
{
top = MainImgheight -objHeight;
}
else if(selection == "BottomCenter")
{
top = MainImgheight -objHeight;
left = (MainImgwidth/2) - (objWidth/2);
}
else if(selection == "BottomRight")
{
top = MainImgheight - objHeight;
left = MainImgwidth - objWidth;
}
$obj.css({'left':left+'px','top':top+'px'});
});
最佳答案
据我所知,这种行为是正确的。当某些东西被变换时:缩放……它保持正常的宽度、高度和位置。这在某些情况下非常有用,例如,您需要一组元素具有允许缩放的悬停状态,而不影响它们周围的元素。
看看我建的这个网站的悬停状态; http://playaz.co.uk
如果这些元素上的悬停状态确实改变了实际的宽度和高度,而不是 transform:scale;所有其他元素都会被推来推去(当然除非它们是绝对定位的,它们不需要)。
解决方案是只更改图像的宽度和高度。要“2.2 倍”缩放您的图像,请尝试这样的操作:
$('img').each(function(){
$(this).css('width',$(this).outerWidth() * 2.2);
});
固定 fiddle :http://jsfiddle.net/ADxw7/
关于jquery - 缩放后仍然无法计算出准确的宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22945793/