2012-08-06 4 views
1

사용자가 이미지를 마우스 오버 한 후 이미지를 가리키고 이미지의 크기를 줄이면 이미지를 확대하려고합니다.이미지의 크기를 변경하는 방법?

나는 다음과 같은 코드가

$('#image_layout').on('hover','img',function(){ 
    $(this).css('width','110%'); 
}) 

$('#image_layout').on('mouseout','img',function(){ 
    $(this).css('width','90%'); 
}) 

내가없는 이미지의 상단 lefe 위치에서 이미지의 중심 위치에서 이미지를 확대 할 수 있습니다.

한 내가 가진 :

----  ------ 
| | -> |  | 
----  |  | 
      ------ 

내가 원하는 사람이 :

   ------ 
    ----  |  | 
    | | --> |  | 
    ----  |  | 
       ------ 

내가 이것을 달성하는 방법을 잘 모르겠습니다 (이미지의 중심에서 사진을 크게한다). 어떤 팁? 고마워요!

+0

사용 CSS3 전환 속성은 할 수 없습니다 그 – gaspyr

+0

윌 더 큰 이미지는 여전히 더 큰 바깥 쪽 div 안에 들어 맞습니까? 아니면 div를 포함하고있는 바운드에서 벗어나기를 원하십니까? 대답이 포함 된 div 안에 유지하면 CSS를 통해 세로로 정렬 할 수 있습니다. 그럴 경우 해답을 얻으려면 큰 이미지의 상단을 조정해야합니다. –

+1

CSS3 + JavaScript 접근 방식 : http://stackoverflow.com/questions/7085879/thumbnail-hover-zoom-enlarge-w-css3-and-javascript-z-axis-problem –

답변

1

달성하고자하는 것은 그렇게 쉽지 않습니다. 원 본을 컨테이너의 중앙에 유지하려면 컨테이너와 관련하여 이미지의 절대 위치를 지정해야합니다. 이 릴 '플러그인으로 시도해보십시오. 아마도 모든 경우에 작동하지는 않지만 시험할만한 가치가 있습니다.

$.fn.centerIt = function(){ 

    var height = this.outerHeight(), 
     width = this.outerWidth(); 

    this.css({ 
     position: 'absolute', 
     top: '50%', 
     left: '50%', 
     marginTop: -(height/2), 
     marginLeft: -(width/2) 
    }) 
    .parent() 
    .css('position', 'relative'); 

    return this;  
}; 

$('img').css('width', '90%').centerIt(); 

데모 :http://jsfiddle.net/elclanrs/RMsSh/

0

JQuery에서 이미지 크기를 변경하는 것은 매우 쉽습니다. 이하거나 width을 변경하고 아직 height를 정의하지 않은 경우 브라우저가 자동으로 그들 사이의 비율을 유지

$('#imageId').width(150).height(100); 
+0

방금 ​​물어볼 필요가있는 점은 무엇입니까? 229와 72가 올거야? lol – Ohgodwhy

+0

그냥 내 프로젝트에서 복사/붙여 넣기했습니다. :) – Shenaniganz

1

.CSS()와 CSS 접근 방식을 취할 수 있으므로 height도있을 것입니다 110%90%. 당신은 그렇게하기 위해 수평 및 수직 중심 이미지를 가질 필요가

$('#image_layout').on('hover','img',function(){ 
    $(this).css('width','110%') 
     .css('height','100%') 
}); 
$('#image_layout').on('mouseout','img',function(){ 
    $(this).css('width','90%') 
     .css('height','100%'); 
}); 
0

:

이 코드를 사용해보십시오.

2

않도록 무거운 페이지에 자바 스크립트의 무게를하지 않는 간단한 CSS 개조하면 되겠 처리 할 수있는 작업을 위해 자바 스크립트를 사용하여. JQuery와 방법에 관한

#image_layout 
{ 
    width : /* initial width value */ 
    height: /* initial height value */ 
} 


#image_layout : hover 
{ 
    width : /* new width value */ 
    height: /* new height value */ 
    /* use of multiple tranistions */ 
    transition : all 0.2s ease-out 
} 

, 그냥 자신의 값을 갖는 속성을 포함하는 개체를 전달, 두 번)에 .css (적용 할 필요가 :

$('#image_layout').on('mouseout','img',function(){ 
    $(this).css({'width':'90%', 'height':'100%'}); 
}); 
관련 문제