layui图片放大功能

你的名字 2020-11-07 19:00 1008阅读 0赞

刚刚的项目里面要做一个图片放大功能，用的layui，直接用layer.open改造了一个，记录一下！

页面：
````
<a href="javascript:void(0);" class="img_big" title="图片路径">  
                                                <img class="*" src="图片路径" height="200" width="200">   
                                            </a>

<img alt="" style="display:none;" id="displayImg" src="" height="500" width="500"/>
````
js:
````
$(".img_big").click(function(){  
        var url = $(this).attr('title');  
        $("#displayImg").attr("src", url);  
        var height = $("#displayImg").height();  
        var width = $("#displayImg").width();  
        layer.open({  
           type: 1,  
           title: false,  
           closeBtn: 0,//隐藏关闭按钮  
           shade: [0.3, '#000'],//黑色背景（0.3代表颜色深度）  
           shadeClose: true,//点击遮罩关闭大图  
           area: [width + 'px', height + 'px'], //宽高  
           resize:false,//不可拖拽缩放  
           skin: 'myskin',//大图背景色定义类  
           content: "<img alt=" + name + " title=" + name + " src=" + url + " height=500px; width=500px;" + "/>"  
        });  
    })
````
css:

.myskin{  
    background-color:transparent;//透明（可根据需求自己调整）  
    opacity: 0.3;//透明度  
}

考虑到以后可能会有很多地方用到这个功能，为了偷懒，直接搞一个js文件好了，用的时候直接引用即可，包括css也一样，然后就简单了，复制粘贴，改一下图片路径，完成！