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

最新推荐文章于 2022-01-22 14:37:28 发布

layx

最新推荐文章于 2022-01-22 14:37:28 发布

阅读量446

点赞数

分类专栏： PHP 文章标签： jquery css html

本文链接：https://blog.csdn.net/weixin_43508199/article/details/120767965

版权

jQuery 图片放大居中显示 CSS3 事件处理

关键词由CSDN通过智能技术生成

PHP 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

话不多说，直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jquery实现图片点击后居中放大</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .mydrawing{
      width: 150px;
      margin: 10px;
    }
    .mydrawing: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="mydrawing" src="../image/20211012/1634028953.jpg" title="大图" />
  <img class="mydrawing" src="../image/20211012/1634028953.jpg" title="大图" />
  <img class="mydrawing" src="../image/20211012/1634028953.jpg" title="大图" />
</div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
  $(function(){
    $('.mydrawing').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>