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

03710

幻影

1年前发布

说明

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

引入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();
  });
});