layer.photos 相册旋转与放大缩小

110 阅读 0 评论 73 点赞

我是靠谱客的博主昏睡星星，这篇文章主要介绍layer.photos 相册旋转与放大缩小，现在分享给大家，希望可以做个参考。

1.相册旋转：

图层中新增一个旋转按钮

复制代码

1
2
3
4
5
6
7
8
9
10
11
layer.photos({
photos: window['attach_albumlist'],
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
tab:function () {
num=0;
$("#layui-layer-photos").parent().append('<div style="position:relative;width:100%;text-align:center;cursor:pointer;">n' +
'tt<button id="xuanzhuan"
style="height30px;">旋转t</button>n' +
't</div>');
}
});

点击按钮调用旋转方法：

复制代码

1
2
3
4
5
$(document).on("click", "#xuanzhuan", function(e) {
num = (num+90)%360;
$(".layui-layer.layui-layer-page.layui-layer-photos").css('background','black');//旋转之后背景色设置为黑色，不然在旋转长方形图片时会留下白色空白
$("#layui-layer-photos").css('transform','rotate('+num+'deg)');
});

通过鼠标滚轮实现图片放大缩小：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(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);
});