js+jquery+html实现在三种不通的情况下，点击图片放大的效果

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>

 

 

 

 

 

 
posted @ 2016-09-08 20:11  caozong  阅读(4319)  评论(0)  编辑  收藏  举报