layui图片放大功能

刚刚的项目里面要做一个图片放大功能，用的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也一样，然后就简单了，复制粘贴，改一下图片路径，完成！

最后

以上就是明理万宝路为你收集整理的layui图片放大功能的全部内容，希望文章能够帮你解决layui图片放大功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。