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

岳泽以

发布于 2023-06-27 10:57:49

3270

发布于 2023-06-27 10:57:49

文章被收录于专栏：岳泽以博客岳泽以博客

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023 年 06 月，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery