1.旋转
最后做图片旋转,因为 layer.photos目前不支持旋转,缩放,所以自己研究了一下。直接上代码
$(document).on("click", ".layui-layer-phimg", function (e) { /*var current = $("#current").val(); current = (current+90)%360; $("#current").val(current); document.getElementById('imglayer').style.transform = 'rotate('+current+'deg)';*/ var current = $("#current").val(); if (current == 0) { current = 90; }else if (current == 90) { current = 180; }else if(current == 180) { current = 270; }else if (current == 270) { current = 0; } document.getElementById('imglayer').style.transform = 'rotate(' + current + 'deg)'; $("#current").val(current); });
layer.js 修改
content: '<input type="hidden" id="current"><div class="layui-layer-phimg"><img id="imglayer" src="' + u[d].src + '" alt="' + (u[d].alt || "") + '" layer-pid="' + u[d].pid + '"><div class="layui-layer-imgbar" style="width:100%;height: 100%; background-color:rgba(0, 0, 0, 0)"></div><div class="layui-layer-imgsee">' + (u.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : "") + '<div class="layui-layer-imgbar" style="display:' + (a ? "block" : "") + '"><span class="layui-layer-imgtit"><a href="javascript:;">' + (u[d].alt || "") + "</a><em>" + s.imgIndex + "/" + u.length + "</em></span></div></div></div>",
2.缩放
layer.photos本省可以缩放,但是效果不太理想
$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg", 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) { if (h < (window.innerHeight)) { 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); });