使用Layer完成圖片放大功能

序言：在寫這個功能之前也用了zoom.js，zoom.js用起來簡單引用js然后設置圖片屬性就可以放大。但是放大后的圖片模糊、沒有遮罩、在放大圖片時其它圖片布局會受到影響，當然如果覺得這些都是小問題的話接來下的代碼就可以不用看了，這個實現的功能是和zoom.js一樣的，只是個人強迫為了體驗效果更佳而進行改動。注意事項：放大后的圖片其實就是圖片自身的大小，放大之前是進行縮小的圖片。

 

1.引用layer.js

Layer官網：http://layer.layui.com/

2.html代碼：

<a href="javascript:DataHtml('無標題2.jpg','/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg')">
　　<img alt='無標題2.jpg' title='無標題2.jpg' style='width:100px' src='/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg'/>
</a>
<a href="javascript:DataHtml('無標題.jpg','/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg')">
　　<img alt='無標題.jpg' title='無標題.jpg' style='width:100px' src='/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg'/>
</a>
<img alt="" style="display:none" id="displayimg" src="" />

3.js代碼：

function DataHtml(name, url) {
                $("#displayimg").attr("src", url);
                var height = $("#displayimg").height();
                var width = $("#displayimg").width();
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    area: [width + 'px', height + 'px'], //寬高
                    content: "<img alt=" + name + " title=" + name + " src=" + url + " />"
                });
            }

瀏覽器效果：

 

zoom.js的放大效果：