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。