例子一
效果
鼠标移动上去放大
<div> <img class="enlarge" width="80" height="80" src="https://img14.360buyimg.com/n0/jfs/t1/134958/22/4022/196092/5f05e5dbE543b1f3d/cced1c5e2247d9ab.jpg"> </div> <script> $(‘.enlarge‘).hover(function () { let link = $(this).attr("src"); let img = `<div class="enlarge-body" style="position:fixed;top:20%;left:38%;width:450px;height:450px;border-radius:10px;z-index:1000;-moz-box-shadow:-1px 1px 9px #333333; -webkit-box-shadow:-1px 1px 9px #333333; box-shadow:-1px 1px 9px #333333;"><img src="${link}" style="width:100%;height:100%;border-radius:10px;"></div>` $("body").append(img); }, function () { $(".enlarge-body").remove(); }); </script>
例子二
效果
鼠标点击放大
<div class=content> <div><img class="enlarge" width="80" height="80" src="https://img14.360buyimg.com/n0/jfs/t1/134958/22/4022/196092/5f05e5dbE543b1f3d/cced1c5e2247d9ab.jpg"></div> </div> <script> $(".content").on("click", ".enlarge", function () { let link = $(this).attr("src"); let img = `<div class="enlarge-body" style="position:fixed;top:20%;left:38%;width:450px;height:450px;border-radius:10px;z-index:1000;-moz-box-shadow:-1px 1px 9px #333333; -webkit-box-shadow:-1px 1px 9px #333333; box-shadow:-1px 1px 9px #333333;"><button class="close-img" style="cursor:pointer;position: absolute;top:-10px;right:-10px;border-radius:50%;border:1px solid #aaa;width: 20px;height:20px;">x</button><img src="${link}" style="width:100%;height:100%;border-radius:10px;"></div>`; $("body").append(img); }); $("body").on("click", ".close-img", function () { $(this).parent().remove(); }); </script>
注意:这个依赖 jquery