LayUi官方文档更新后发现图片查看组件layer.photos()没有了 记录一下用法
例:
<ul id="">
<li title="" ng-repeat="(val,item) in Obj" ng-click="gszzxxClick(item)">
<img ng-src="{{item.src}}" alt="">
<div class="text" title="">
{{item.alt}}
</div>
</li>
</ul>
scope.gszzxxClick = function (obj) {
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": obj.alt,
"pid": obj.pid,
"src": obj.src,
}
]
},
shade: [0.5, '#000'], // 设置遮罩层颜色为黑色,透明度为0.5
shadeClose: true, // 设置点击遮罩层关闭图片查看器(可选)
footer: true, // 是否显示底部栏 --- 2.8.16+
success: function(){
// 在图片预览成功后添加鼠标滚轮事件监听器(鼠标滑轮滚动缩放图片)
$(document).on("mousewheel", ".layui-layer-photos img", function(event){
event.preventDefault(); // 阻止默认行为
var delta = event.originalEvent.deltaY || event.originalEvent.detail || -event.originalEvent.wheelDelta; // 获取滚轮方向
var scale = delta > 0 ? 0.9 : 1.1; // 定义缩放比例(缩小和放大)
var img = $(this); // 获取当前图片元素
var currentWidth = img.width(); // 当前宽度
var currentHeight = img.height(); // 当前高度
// 计算新的宽度和高度
var newWidth = currentWidth * scale;
var newHeight = currentHeight * scale;
// 设置新的宽度和高度(注意:这里可能需要添加额外的逻辑来限制最大和最小缩放比例)
img.css({
width: newWidth + 'px',
height: newHeight + 'px'
});
$('.layui-layer-page').css({
width: newWidth + 'px',
height: newHeight + 'px'
})
$('#layui-layer-photos').css({
width: newWidth + 'px',
height: newHeight + 'px'
})
});
}
});
}
这里需要注意data中的alt、pid、src参数名需要规范 不然可能footer:true无法正常显示