LayUI Photos实现图片查看效果并鼠标放大缩小与旋转功能

1、调用

$('#查看图片按钮').on('click',function(){
        var id = $(this).attr('data-id');
        var name = $(this).attr('data-name');
        var url = $(this).attr('data-url');
        OpenPic(id ,name,url);
});        

 

2、具体实现

//查看图片
function OpenPic(id,name,url){
    //组装图片数据
    var photoJson = {
        "title": "", //相册标题
        "id": id, //相册id
        "start": 0, //初始显示的图片序号，默认0
        "data": [   //相册包含的图片，数组格式
                    {
                        "alt": name,
                        "pid": id, //图片id
                        "src": url, //原图地址
                        "thumb": url //缩略图地址
                    }
                ]
        };
    
    layui.use(['layer'], function () {
        var layer = layui.layer;
        var num;
        layer.photos({
            photos: photoJson,
            anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
            //closeBtn: 1,//开启关闭按钮
            //添加旋转按钮
            tab: function () {
                num = 0;
                $("#layui-layer-photos").append(
                //'/Content/images/TowardsLeftRotate.png'(逆时针)
                //'/Content/images/TowardsRightRotate.png'(顺时针)
                //'/Content/images/rotate.png'(双向旋转)
                `<div class="pootosIcon" style="position:absolute;width:100%;text-align:center;bottom:0px;cursor:pointer;">
                    <img src="/Content/images/rotate.png" style="width:32px;height:32px;">
                 </div>`);
            },
            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 });
                    //设置图片外div宽高
                    $("#layui-layer-photos").css({ width: w, height: h });
                    //设置图片宽高
                    $("#layui-layer-photos>img").css({ width: w, height: h });
                });
                //点击旋转按钮旋转图片
                $(document).on("click", ".pootosIcon img", function (e) {
                     //+90为向右旋(顺时针)，-90为向左旋(逆时针)
                     num = (num + 90) % 360;
                     //旋转之后背景色设置为黑色，不然在旋转长方形图片时会留下白色空白
                     //$(".layui-layer.layui-layer-page.layui-layer-photos").css('background', 'black');
                     $("#layui-layer-photos").css('transform', 'rotate(' + num + 'deg)');
                 });
              },
              //销毁回调
              end: function () { }
         });
    });
});