js+jquery+html实现三种不同图片放大效果

雨

三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定，高度不固定

 

　　第一种情况：图片的父元素宽高固定:

01<!DOCTYPE html>
02<html lang="en">
03 
04    <head>
05        <meta charset="UTF-8">
06        <title>Title</title>
07        <style>
08            body {
09                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>
43 
44first

　　第二种情况：图片的宽高固定：

01second
02<!DOCTYPE html>
03<html lang="en">
04 
05    <head>
06        <meta charset="UTF-8">
07        <title>Title</title>
08        <style>
09            #bbb {
10                position: relative;
11            }
12             
13            #bbb img {
14                width: 200px;
15                height: 200px;
16                position: absolute
17            }
18             
19            #bbb img:hover {
20                width: 240px;
21                height: 240px;
22                left: -20px;
23                top: -20px;
24                clip: rect(20px, 220px, 220px, 20px)/*裁剪 上右下左*/
25            }
26             
27        </style>
28    </head>
29 
30    <body>
31        <h1>图片的宽高固定</h1>
32        <div id="bbb">
33            <img src="../images/图标1.png">
34        </div>
35    </body>
36    <html>

　　第三种情况：图片的父元素宽固定，高度不固定

01third
02<!DOCTYPE html>
03<html lang="en">
04 
05    <head>
06        <meta charset="UTF-8">
07        <title>Title</title>
08        <style>        
09            #ccc {
10                position: relative;
11                top: 200px;
12                width: 15%;
13                overflow: hidden;
14 
15            }
16             
17            #ccc img {
18                width: 100%;
19                height: auto;
20                position: relative;
21                vertical-align: bottom; /*设置图片底部对齐*/
22            }
23        </style>
24    </head>
25 
26    <body>
27        <h1 style="position: relative; top:200px;">图片的父元素宽固定，高度不固定</h1>
28        <div id="ccc">
29            <img src="../images/图标1.png">
30        </div>
31 
32        <script src="../js/jquery.min.js"></script>
33        <script>
34 
35            $("#ccc img").mouseenter(function() {
36                //clientHeight动态获取对象的高度
37                var y = this.parentNode.clientHeight;
38                this.parentNode.style.height = y + "px";
39                this.style.width = "120%";
40                this.style.height = "120%";
41                this.style.top = "-10%";
42                this.style.left = "-10%";
43            });
44            $("#ccc img").mouseleave(function() {
45                this.parentNode.style.height = "auto";
46                this.style.width = "100%";
47                this.style.height = "auto";
48                this.style.top = "0";
49                this.style.left = "0";
50            });
51        </script>
52    </body>
53    <html>

 

来源作者：caozong

0

登录后可发表评论，立即登录