首页 > 其他分享> > Jquery 实现点击图片放大显示在窗口

Jquery 实现点击图片放大显示在窗口

2021-10-14 17:02:47 作者：互联网

话不多说，直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jquery实现图片点击后居中放大</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .drawing{
      width: 150px;
      margin: 10px;
    }
    .drawing:hover{
      cursor: zoom-in;
    }
    .wrapper{
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-color: rgba(52, 52, 52, 0.8);
      background-size: 50%;
    }
    .wrapper:hover{
      cursor: zoom-out;
    }
  </style>


</head>
<body>
<div class="container">
  <img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
  <img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
  <img class="drawing" src="../image/20211012/1634028953.jpg" title="大图" />
</div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
  $(function(){
    $('.drawing').click(function(){
      //查看大图
      $(this).after("<div class='wrapper'></div>");
      var imgSrc = $(this).attr('src');
      $(".wrapper").css("background-image", "url(" + imgSrc + ")");
      $('.wrapper').fadeIn(1000);
      //关闭并移除图层
      $('.wrapper').click(function(){
        $('.wrapper').fadeOut(1000).remove();
      });
    });
  });
</script>



</html>

标签：Jquery,function,repeat,窗口,wrapper,52,点击,background,drawing
来源： https://blog.csdn.net/weixin_43508199/article/details/120767965