DEMO click on the circular picture, picture method, place the water picture on the lower layer. When the mouse moves up, the height and width of the picture increase proportionally, and the picture moves to the upper left
Code
Untitled document <script> <br>$(document) .ready(function(e) { <br>$(".water1").mouseover(function(){ <br>$("#img1").stop(true,true).animate({top:"- 32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow"); <br>$("#img2").stop(true,true).animate( {top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow"); <br>$("#img3").stop(true,true) .animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow"); <br>}) <br>$(".water1" ).mouseout(function(){ <br>$("#img1").stop(true,true).animate({top:"0px",left:"0px",width:"335px",height:" 335px"},"slow"); <br>$("#img2").stop(true,true).animate({top:"0px",left:"0px", width:"95px",height: "95px"},"slow"); <br>$("#img3").stop(true,true).animate({top:"0px",left:"0px", width:"33px",height :"33px"},"slow"); <br>}) <br>}); <br></script>
< ;div class="water1">
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
