使用Layer完成圖片放大功能
阿新 • • 發佈:2018-07-30
file mage 不用 url con html clas wid img
序言:在寫這個功能之前也用了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的放大效果:
使用Layer完成圖片放大功能