首页 > 代码库 > js+jquery+html实现在三种不通的情况下，点击图片放大的效果
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: 400px10 }11 12 #aaa {13 width: 200px;14 height: 200px;15 border: 1px solid #000;16 overflow: hidden17 }18 #aaa img {19 width: 100%;20 height: 100%;21 position: relative;22 top: 0;23 left: 024 }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>
第二种情况：图片的宽高固定：
second1 <!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: absolute16 }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>
第三种情况：图片的父元素宽固定，高度不固定
third1 <!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实现在三种不通的情况下，点击图片放大的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。