jQuery 단순 이미지 확대 효과 샘플 code_jquery

DEMO 원형 그림을 클릭하고 그림 방식으로 물 그림을 아래쪽 레이어에 배치합니다. 마우스를 위로 올리면 그림의 높이와 너비가 비례하여 증가하며 그림이 왼쪽 상단으로 이동합니다.

코드

코드 복사 코드는 다음과 같습니다.

스크립트>
$(문서) .ready(function(e) {
$(".water1").mouseover(function(){
$("#img1").stop(true,true ).animate({top:"- 32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow")
$("#img2"). stop(true,true).animate( {top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow")
$("#img3 ").stop(true,true) .animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow");
})
$(".water1" ).mouseout(function(){
$("#img1").stop(true,true).animate({top:"0px",left:"0px", 너비:"335px", 높이:" 335px"},"느림");
$("#img2").stop(true,true).animate({top:"0px",left:"0px" , 너비:"95px", 높이: "95px"},"느림")
$("#img3").stop(true,true).animate({top:"0px",left:"0px ", 너비:"33px", 높이:"33px"},"느림");
})
});


"표시">
< ;div class="water1">