参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636
一、应用场景：点击图片可以对图片进行放大显示。
二、实现代码:
说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 <!--任一版本的jquery都可以--> 6 <script src="jquery-1.10.2.min.js"></script> 7 <style> 8 .enlargeImg_wrapper { 9 display: none; 10 position: fixed; 11 z-index: 999; 12 top: 0; 13 right: 0; 14 bottom: 0; 15 left: 0; 16 background-repeat: no-repeat; 17 background-attachment: fixed; 18 background-position: center; 19 background-color: rgba(52, 52, 52, 0.8); 20 background-size: 37%; 21 } 22 img:hover { 23 cursor: zoom-in; 24 } 25 .enlargeImg_wrapper:hover { 26 cursor: zoom-out; 27 } 28 </style> 29 </head> 30 <body> 31 <img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" /> 34 <div class="imgBox"></div> 35 <script type="text/javascript"> 36 $(function() { 37 enlargeImg(); 38 }) 39 //关闭并移除图层 40 function closeImg() { 41 $('.enlargeImg_wrapper').fadeOut(200).remove(); 42 } 43 //查看大图 44 function enlargeImg() { 45 $(".enlargeImg").click(function () { 46 $('.imgBox').html("<div class='enlargeImg_wrapper'></div>"); 47 var imgSrc = $(this).attr('src'); 48 $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")"); 49 $('.enlargeImg_wrapper').fadeIn(200); 50 }) 51 $('.imgBox').on('click', '.enlargeImg_wrapper', function () { 52 $('.enlargeImg_wrapper').fadeOut(200).remove(); 53 }) 54 } 55 </script> 56 </body> 57 </html>
支付宝扫一扫
微信扫一扫
