标签：inf 标题 copy 引用 大小 分享图片 pen als idt
序言：在写这个功能之前也用了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 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的放大效果：
标签：inf 标题 copy 引用 大小 分享图片 pen als idt
原文地址：https://www.cnblogs.com/hedianzhan/p/9389884.html
