Question

我正在将图像移动到另一个图像上方，如果不应用任何类型的缩放，图像将在正确的位置移动但是如果我应用缩放它将永远不会到达正确的位置。可能的宽度和高度被更改

$( "#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'});

});

Answer 1

据我所知，这种行为是正确的。什么东西变换：缩放...它保持正常的宽度，高度和位置。例如，当您需要一组元素来悬停状态以允许缩放它们而不影响它们周围的元素时，这很好。

查看我建立的这个网站上的悬停状态; http://playaz.co.uk

如果这些元素上的悬停状态DID实际上改变了实际的宽度和高度，而不是变换：scale;所有其他元素都会被推开（除非他们绝对定位，他们不需要）。

解决方案是改变图像的宽度和高度。要“2.2x”缩放你的图像，尝试这样的事情：

$('img').each(function(){
    $(this).css('width',$(this).outerWidth() * 2.2); 
});

修正小提琴：http://jsfiddle.net/ADxw7/

缩放后仍无法计算精确的宽度和高度

1 个答案: