前端学习之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(){ //销毁回调
                
              }
        });
    }