layui图片放大预览 VS zoomify 放大

发布于 2021-04-17 09:29:26

layui图片放大 可以在父框架中展示;zoomify目前不可以。

//调整预览大小    
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 });      
            }      
        });     
    }    
//原图预览    
function previewImgs(obj) {    
        var img = new Image();      
        img.src = obj.src;    
        var height = img.height + 50; //获取图片高度    
        var width = img.width; //获取图片宽度    
        var imgHtml = "<img src='" + obj.src + "' />";      
        //弹出层    
        layer.open({      
            type: 1,      
            shade: 0.8,    
            offset: 'auto',    
            area: [width + 'px',height+'px'],    
            shadeClose:true,//点击外围关闭弹窗    
            scrollbar: false,//不现实滚动条    
            title: "图片预览", //不显示标题      
            content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响      
            cancel: function () {      
                //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });      
            }      
        });     
    }

zoomify调用:

<link rel="stylesheet" href="__ROOT__/static/fangda/dist/zoomify.min.css">    
<script src="__ROOT__/static/fangda/dist/zoomify.min.js"></script>    
<script type="text/javascript">    
        $('.fangda').zoomify("reposition");    
    </script>



关注公众号,了解更多it技术(it问答网

0 条评论

发布
问题