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">
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
