js+jquery+html实现在三种不通的情况下，点击图片放大的效果。
三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定，高度不固定
第一种情况：图片的父元素宽高固定:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding-bottom: 400px
} #aaa {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden
}
#aaa img {
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0
} #aaa img:hover {
width: 120%;
height: 120%;
left: -10%;
top: -10%
} </style>
</head> <body>
<h1>图片的父元素宽高固定</h1>
<div id="aaa">
<img src="../images/图标1.png">
</div>
</body>
<html>
first
第二种情况：图片的宽高固定：
second
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#bbb {
position: relative;
} #bbb img {
width: 200px;
height: 200px;
position: absolute
} #bbb img:hover {
width: 240px;
height: 240px;
left: -20px;
top: -20px;
clip: rect(20px, 220px, 220px, 20px)/*裁剪 上右下左*/
} </style>
</head> <body>
<h1>图片的宽高固定</h1>
<div id="bbb">
<img src="../images/图标1.png">
</div>
</body>
<html>
第三种情况：图片的父元素宽固定，高度不固定
third
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ccc {
position: relative;
top: 200px;
width: 15%;
overflow: hidden; } #ccc img {
width: 100%;
height: auto;
position: relative;
vertical-align: bottom; /*设置图片底部对齐*/
}
</style>
</head> <body>
<h1 style="position: relative; top:200px;">图片的父元素宽固定，高度不固定</h1>
<div id="ccc">
<img src="../images/图标1.png">
</div> <script src="../js/jquery.min.js"></script>
<script> $("#ccc img").mouseenter(function() {
//clientHeight动态获取对象的高度
var y = this.parentNode.clientHeight;
this.parentNode.style.height = y + "px";
this.style.width = "120%";
this.style.height = "120%";
this.style.top = "-10%";
this.style.left = "-10%";
});
$("#ccc img").mouseleave(function() {
this.parentNode.style.height = "auto";
this.style.width = "100%";
this.style.height = "auto";
this.style.top = "0";
this.style.left = "0";
});
</script>
</body>
<html>