jQuery simple image magnification effect sample code_jquery

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

Copy code The code is as follows:

<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">