JS中利用JQuery模拟点击图片放大效果，支持多图-灵锡网

AI摘要

利用jQuery实现图片点击放大效果，支持多图。通过给图片添加类名imglist，在js中使用代码模拟点击事件。通过创建一个模态框，实现图片的放大展示。使用jQuery插件简化引入过程，并通过设置CSS样式控制模态框的位置、大小、背景色等属性。

说明

类似模态框，当然用其他插件可能更方便

引入jQuery，然后给所有要实现点击弹出放大效果的图片添加一个类名为imglist

然后在js中使用如下代码：

代码

$(".imglist").click(function() {
  var modal = $("<div></div>").css({
    "position": "fixed",
    "top": "0",
    "left": "0",
    "width": "100%",
    "height": "100%",
    "background-color": "rgba(0,0,0,0.5)",
    "display": "flex",
    "justify-content": "center",
  "align-items": "center"
  
  });
  $("body").append(modal);  var modalImg = $("<img>").attr("src", this.src).css({
    "display": "block",
    "margin": "auto",
    "max-width": "80%",
    "max-height": "80%"
  });
  modal.append(modalImg);  modal.click(function() {
    $(this).remove();
  });
});