js+jquery+html实现在三种不通的情况下，点击图片放大的效果
Posted caozong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
第二种情况：图片的宽高固定：
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>
以上是关于js+jquery+html实现在三种不通的情况下，点击图片放大的效果的主要内容，如果未能解决你的问题，请参考以下文章