JQuery simple image magnification effect sample code

  • 2020-03-30 03:15:01
  • OfStack

In the DEMO, click the circle picture and picture method, and place the picture of water on the lower layer. When the mouse moves up, the height and width of the picture increase year on year, and the picture moves up to the left

code
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Headless document </title> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script> 
$(document).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",width:"335px",height:"335px"},"slow"); 
$("#img2").stop(true,true).animate({top:"0px",left:"0px", width:"95px",height:"95px"},"slow"); 
$("#img3").stop(true,true).animate({top:"0px",left:"0px", width:"33px",height:"33px"},"slow"); 
}) 
}); 
</script> 
<style> 
.show{ width:1440px; height:474px; position:relative; background-color:#3d9abc;} 
.water1{ height: 335px; width:335px; border-radius:167.5px; overflow:hidden; position:absolute; left:186px; top:69px;} 
.water2{ height: 95px; width:95px; border-radius:47.5px; overflow:hidden; position:absolute; left:545px; top:294px;} 
.water3{ height: 33px; width:33px; border-radius:16.5px; overflow:hidden; position:absolute; left:549px; top:220px;} 
#img1{ position:absolute;} 
#img2{ position:absolute; } 
#img3{ position:absolute;} 
</style> 
</head> 
<body> 
<div class="show"> 
<div class="water1"><img id="img1" src="images/big.jpg" /></div> 
<div class="water2"><img id="img2" src="images/middle.jpg" /></div> 
<div class="water3"><img id="img3" src="images/small.jpg" /></div> 
</div> 
</body> 
</html> 

Related articles: