自定制js圖片放大插件

例子一 

效果

鼠標移動上去放大

<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