jQuery简易图片放大特效示例代码
代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scriptsrc="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>
<div><imgid="img1"src="images/big.jpg"/></div>
<div><imgid="img2"src="images/middle.jpg"/></div>
<div><imgid="img3"src="images/small.jpg"/></div>
</div>
</body>
</html>