51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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

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

引入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();
  });
});
赞(0)
未经允许不得转载:工具盒子 » JS中利用JQuery模拟点击图片放大效果,支持多图