LayUI:基于LayUI的图片放大预览方法

最新推荐文章于 2024-12-23 09:29:45 发布

原创最新推荐文章于 2024-12-23 09:29:45 发布 · 7k 阅读

6 ·

CC 4.0 BY-SA版权

项目开发日记同时被 2 个专栏收录

60 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

本文介绍了如何在B/S端利用LayUI框架实现图片点击预览功能。通过在img标签上绑定onclick事件，调用previewImg函数，动态创建弹窗以全尺寸显示图片。此方法可扩展为鼠标悬浮预览，并提供了调整弹窗大小的示例代码。

B/S端经常需要显示图片,图片有时候,需要预览放大,实现的方法,挺多的,比如鼠标点击放大,比如鼠标悬浮放大等,

最近看到LayUI下,可以直接给img绑定onclick时间,可以在事件中打开一个弹窗显示图片,觉得还挺方便,记录以供后面使用. 该方式是通过点击事件后,在方法中实现,感觉后续也可以改成鼠标悬浮的响应事件吧.

过程:

(1)img标签中需要增加绑定事件:οnclick=\"previewImg(this)\"

dr["照片"] = "<img onclick=\"previewImg(this)\" style='width:40px;height:40px;cursor:pointer;' src='" + filename1 + "'>";

Tips:这是后端动态构建代码,主要任务是给一个获取数据的url,可以根据情况自己改变,只要img标签中onclick事件绑定好就好了.

(2)在对应页面的JS中实现绑定的onclick事件:原图大小预览

<script>
        //预览大小根据原图的大小决定弹窗的大小
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [height + 'px', width + 'px'],
                shadeClose: true,
                scrollbar: false,
                title: "用餐图片预览", //不显示标题  
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
                }
            });
        }
    </script>

当然,可以自己自己指定弹窗大小,只是改成height,width给一个具体而已即可,可参考

function previewImg(obj) {
        var img = new Image();  
        img.src = obj.src;
        var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";  
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [600 + 'px',300+'px'],
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }

参考:https://www.php.cn/blog/detail/10130.html