前端學習之layui照片查看器縮放

前言

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(){ //銷毀回調
                
              }
        });
    }