2014-04-08 2 views
0

다른 이미지 위에 이미지가 움직입니다. 어떤 유형의 크기 조정도 적용하지 않으면 올바른 위치에 이미지가 표시되지만 크기 조정을 적용하면 올바른 위치로 이동하지 않습니다. 높이가여전히 크기 조정 후 정확한 너비와 높이를 계산할 수 없음

을 변경이 내가 아는 그 행동이 올바른지 지금까지 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'}); 

}); 

답변

1

입니다. 무언가가 변형 될 때 : scale'd ... 정상적인 폭, 높이 및 위치를 유지합니다. 예를 들어 마우스 오버시 상태를 조정하여 주변 요소에 영향을주지 않는 요소 그룹이 필요한 경우에 유용합니다. 내가 만든이 사이트에 호버 상태에서

봐; http://playaz.co.uk

이들 요소에 호버 상태가 실제로 실제 폭과 높이를 변경하는 대신 변환 않았다면 : 스케일; 다른 요소들은 모두 밀어 붙여 질 것입니다 (물론 절대적으로 위치하지 않는 한 그들은 필요하지 않습니다).

이 솔루션은 이미지의 폭과 높이를 변경하는 것입니다. "2.2 배"로, 이미지의 크기를 조절이 같은 시도 :

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

고정 바이올린 : http://jsfiddle.net/ADxw7/

관련 문제