jquery点击放大图片

参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636

一、应用场景：点击图片可以对图片进行放大显示。

二、实现代码:

说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。

 <html>

 <head>

     <meta charset="UTF-8">

     <title></title>

  <!--任一版本的jquery都可以-->

 <script src="jquery-1.10.2.min.js"></script>

 <style>

  .enlargeImg_wrapper {

   display: none;

   position: fixed;

   z-index: 999;

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   background-repeat: no-repeat;

   background-attachment: fixed;

   background-position: center;

   background-color: rgba(52, 52, 52, 0.8);

   background-size: 37%;

 }

 img:hover {

     cursor: zoom-in;

 }

 .enlargeImg_wrapper:hover {

     cursor: zoom-out;

 }

     </style>

 </head>

 <body>

     <img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" />

     <div class="imgBox"></div>

     <script type="text/javascript">

     $(function() {

         enlargeImg();

     })

     //关闭并移除图层

     function closeImg() {

         $('.enlargeImg_wrapper').fadeOut(200).remove();

     }

     //查看大图

     function enlargeImg() {

         $(".enlargeImg").click(function () {

             $('.imgBox').html("<div  class='enlargeImg_wrapper'></div>");

             var imgSrc = $(this).attr('src');

             $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");

             $('.enlargeImg_wrapper').fadeIn(200);

         })

         $('.imgBox').on('click', '.enlargeImg_wrapper', function () {

             $('.enlargeImg_wrapper').fadeOut(200).remove();

         })

     }

     </script>

 </body>

 </html>

巴特西

jquery点击放大图片

最新文章

热门文章