当前位置：首页 > news >正文

LayUi点击查看图片组件layer.photos()用法（图片放大预览后滚动鼠标缩放、底部显示自定义标题）

news 来源：原创 2025/5/16 0:50:45

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无法正常显示