为layer.photos增加鼠标滚轮缩放及旋转功能
编辑时间:2023-03-23 作者:金满斗 浏览量:2728 来源:原创

layer.photos里自带了没有,但自己确实又需要这个功能,有些手机上传的图,如果在电脑上不能旋转,看还是不方便的。

第一步,在主main.js里添加如下代码

//增加layui的相册层里鼠标滚轮则图片可以变大变小
    $(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
        var imagep = $(".layui-layer-phimg").parent().parent();
        var image = $(".layui-layer-phimg").parent();
        var h = image.height();
        var w = image.width();
        if (delta > 0) {
            h = h * 1.05;
            w = w * 1.05;
        } else if (delta < 0) {
            if (h > 100) {
                h = h * 0.95;
                w = w * 0.95;
            }
        }
        imagep.css("top", (window.innerHeight - h) / 2);
        imagep.css("left", (window.innerWidth - w) / 2);
        image.height(h);
        image.width(w);
        imagep.height(h);
        imagep.width(w);
    });

     //相册里点击旋转按钮旋转图片
     $(document).on("click", ".pootosIcon", function (e) {
        angle = (angle + 90) % 360;
        $(".layui-layer-phimg img").css('transform', 'rotate(' + angle + 'deg)');
    });



然后再每个html相册弹出div里加个层就行。

layer.photos({photos: '#business-photos',anim: 5,shade: .6, closeBtn: true,
                 tab: function () {
                    $("#layui-layer-photos").parent().append(`<div  class="layui-layer-imgbar" style="text-align:center;color:#fff"><span style="padding-right:100px;font-size:14px;">鼠标滚轮缩放图片</span>
                        <span class="pootosIcon" style="cursor:pointer; font-size:14px;">点击旋转<i class="layui-icon layui-icon-refresh" style="font-size: 16px;"></i></span></div>`);
                }}); 



其中 angle变量是旋转角度。自己开始定义下。每个层弹出时讲好也应该angle=0,但我觉得没有必要。

最终效果如图,我个人觉得很ok。


来说两句吧