前端學習之layui照片檢視器縮放
阿新 • • 發佈:2020-11-03
前言
layui的彈出層有個layer.photos()的照片檢視器方法,用該方法可以很方便的進行照片的預覽,具體的使用方法參考官方文件就好;現在主要就是介紹如何對預覽的圖片進行滑鼠滾輪的放大縮小,直接上程式碼吧!
//檢視照片 function openPhotos(index){ photoJson = { title: "", //相簿標題 id: new Date().getTime(), //相簿id start: index,//初始顯示的圖片序號,預設0 data: photoJson.data //照片列表 } var json = JSON.parse(JSON.stringify(photoJson)); layer.photos({ photos: json ,success: function() { //以滑鼠位置為中心的圖片滾動放大縮小 $(document).on("mousewheel",".layui-layer-photos",function(ev){var oImg = this; var ev = event || window.event;//返回WheelEvent //ev.preventDefault(); var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0; var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth, ratioT= (ev.clientY - oImg.offsetTop) / oImg.offsetHeight, ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1, w = parseInt(oImg.offsetWidth * ratioDelta), h = parseInt(oImg.offsetHeight * ratioDelta), l = Math.round(ev.clientX - (w * ratioL)), t = Math.round(ev.clientY - (h * ratioT)); $(".layui-layer-photos").css({ width: w, height: h ,left: l, top: t }); $("#layui-layer-photos").css({width: w, height: h}); $("#layui-layer-photos>img").css({width: w, height: h}); }); } ,end: function(){ //銷燬回撥 } }); }