基于jquery实现图片放大功能

下面是“基于jQuery实现图片放大功能”的完整攻略：

1. 从CDN引入jQuery库

在html文件中引入jQuery库，可以从CDN上引入，例如

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

2. HTML结构准备

将需要放大的图片放到img标签中，加上对应的id和class，例如：

<img id="originImg" class="img-fluid" src="https://picsum.photos/id/237/200/300" alt="image">

3. CSS样式设置

为图片加上CSS样式，使其能够被鼠标hover和放大，并设置过渡效果：

.img-fluid {
  cursor: pointer;
  transition: transform .3s ease-out;
}
.img-fluid:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 10;
}

4. jQuery代码实现图片放大

编写jQuery代码，实现当鼠标滑过图片时，显示放大图，鼠标离开时，隐藏放大图的效果。具体代码如下：

$(function() {
  $("#originImg").hover(function() {
    var img_src = $(this).attr('src');
    $("body").append("<div id='img-modal'><img src='" + img_src + "'><div>");
    $("#img-modal").fadeIn(300);
  }, function() {
    $("#img-modal").fadeOut(300, function() {
      $("#img-modal").remove();
    });
  });
});

上述代码实现了当鼠标悬浮在图片上时，动态创建一个包含放大图片的带有遮罩层的div，并在div内部创建放大图片，再将该div插入到body中。当鼠标离开图片时，将div和遮罩层淡出，并将div从body中删除。需要注意的是，放大图片的大小应该是原图片的几倍，可以通过设置图片的宽度和高度实现。

5. 示例说明

以下是两个示例说明：

示例一：使用自定义大小的放大图片

<img id="originImg" class="img-fluid" src="https://picsum.photos/id/237/200/300" alt="image">

<style>
  .img-fluid {
    cursor: pointer;
    transition: transform .3s ease-out;
  }
  .img-fluid:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 10;
  }
  #img-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    display: none;
  }
  #img-modal img {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(function() {
    $("#originImg").hover(function() {
      var img_src = $(this).attr('src');
      $("body").append("<div id='img-modal'><img src='" + img_src + "'></div>");
      $("#img-modal").fadeIn(300);
    }, function() {
      $("#img-modal").fadeOut(300, function() {
        $("#img-modal").remove();
      });
    });
  });
</script>

在上述示例中，我们添加了一些其他的CSS样式，创建了一个500x500的放大图。可以根据自己的需要调整放大图的大小。

示例二：在多个图片上使用该功能

<style>
  .img-fluid {
    cursor: pointer;
    transition: transform .3s ease-out;
    margin-right: 10px;
  }
  .img-fluid:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 10;
  }
  #img-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    display: none;
  }
  #img-modal img {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(function() {
    $(".img-fluid").hover(function() {
      var img_src = $(this).attr('src');
      $("body").append("<div id='img-modal'><img src='" + img_src + "'></div>");
      $("#img-modal").fadeIn(300);
    }, function() {
      $("#img-modal").fadeOut(300, function() {
        $("#img-modal").remove();
      });
    });
  });
</script>

<img class="img-fluid" src="https://picsum.photos/id/237/200/300" alt="image">
<img class="img-fluid" src="https://picsum.photos/id/340/200/300" alt="image">
<img class="img-fluid" src="https://picsum.photos/id/850/200/300" alt="image">
<img class="img-fluid" src="https://picsum.photos/id/1024/200/300" alt="image">

在上述示例中，我们使用了相同的CSS和jQuery代码，但是将类名改为了通用的“img-fluid”，这样我们就可以在多个图片上使用和应用上述功能了。