search

Home >Web Front-end >JS Tutorial >jQuery simple image magnification effect sample code_jquery

jQuery simple image magnification effect sample code_jquery

WBOY
WBOYOriginal
2016-05-16 16:45:251565browse

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:





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






Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript controls the insertion of text at the cursor position suitable for emoticon insertion_javascript skillsNext article：JavaScript controls the insertion of text at the cursor position suitable for emoticon insertion_javascript skills

Related articles

See more