js+jquery+html实现在三种不通的情况下，点击图片放大的效果。
三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定，高度不固定
第一种情况：图片的父元素宽高固定:
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 body {
9 padding-bottom: 400px
10 }
11
12 #aaa {
13 width: 200px;
14 height: 200px;
15 border: 1px solid #000;
16 overflow: hidden
17 }
18 #aaa img {
19 width: 100%;
20 height: 100%;
21 position: relative;
22 top: 0;
23 left: 0
24 }
25
26 #aaa img:hover {
27 width: 120%;
28 height: 120%;
29 left: -10%;
30 top: -10%
31 }
32
33 </style>
34 </head>
35
36 <body>
37 <h1>图片的父元素宽高固定</h1>
38 <div id="aaa">
39 <img src="../images/图标1.png">
40 </div>
41 </body>
42 <html>
first
第二种情况：图片的宽高固定：
second
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 #bbb {
9 position: relative;
10 }
11
12 #bbb img {
13 width: 200px;
14 height: 200px;
15 position: absolute
16 }
17
18 #bbb img:hover {
19 width: 240px;
20 height: 240px;
21 left: -20px;
22 top: -20px;
23 clip: rect(20px, 220px, 220px, 20px)/*裁剪 上右下左*/
24 }
25
26 </style>
27 </head>
28
29 <body>
30 <h1>图片的宽高固定</h1>
31 <div id="bbb">
32 <img src="../images/图标1.png">
33 </div>
34 </body>
35 <html>
第三种情况：图片的父元素宽固定，高度不固定
third
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 #ccc {
9 position: relative;
10 top: 200px;
11 width: 15%;
12 overflow: hidden;
13
14 }
15
16 #ccc img {
17 width: 100%;
18 height: auto;
19 position: relative;
20 vertical-align: bottom; /*设置图片底部对齐*/
21 }
22 </style>
23 </head>
24
25 <body>
26 <h1 style="position: relative; top:200px;">图片的父元素宽固定，高度不固定</h1>
27 <div id="ccc">
28 <img src="../images/图标1.png">
29 </div>
30
31 <script src="../js/jquery.min.js"></script>
32 <script>
33
34 $("#ccc img").mouseenter(function() {
35 //clientHeight动态获取对象的高度
36 var y = this.parentNode.clientHeight;
37 this.parentNode.style.height = y + "px";
38 this.style.width = "120%";
39 this.style.height = "120%";
40 this.style.top = "-10%";
41 this.style.left = "-10%";
42 });
43 $("#ccc img").mouseleave(function() {
44 this.parentNode.style.height = "auto";
45 this.style.width = "100%";
46 this.style.height = "auto";
47 this.style.top = "0";
48 this.style.left = "0";
49 });
50 </script>
51 </body>
52 <html>
时间： 2024-12-28 11:40:33