layui图片放大功能

你的名字 2020-11-07 19:00 980阅读 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也一样，然后就简单了，复制粘贴，改一下图片路径，完成！

发表评论取消回复

表情：

评论列表（有 0 条评论，980人围观）

还没有评论，来说两句吧...

相关阅读

相关前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）

Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。

Dear 丶/ 2024年04月22日 22:30/ 0 赞/ 67 阅读

相关 Vue 点击图片放大显示功能

1 方式一：列表中感应鼠标显示大图 ![在这里插入图片描述][ea4b3a1f831349cea22500b85547d702.png] 我管理后台使用的是 elem

红太狼/ 2023年10月08日 22:49/ 0 赞/ 38 阅读

相关 layui预览图片功能

`layer.photos`有两种用法 1. 获取`json`文件中的数据查看相册这种方法直接按文档中的提示来做就好了 [layer.photos文档

妖狐艹你老母/ 2022年12月05日 12:15/ 0 赞/ 689 阅读

相关 vue实现点击图片放大显示功能

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq3488

ゝ一纸荒年。/ 2022年11月17日 13:53/ 0 赞/ 326 阅读

相关仿淘宝实现鼠标移入图片，图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <sty

深藏阁楼爱情的钟/ 2022年05月29日 11:36/ 0 赞/ 316 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 412 阅读

相关 layui表格内放置图片，并点击放大

cols: [[ //表头 { field: 'brand_img_url', title

川长思鸟来/ 2022年04月10日 14:16/ 0 赞/ 623 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 557 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 514 阅读

相关 layui图片放大功能

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

你的名字/ 2020年11月07日 19:00/ 0 赞/ 981 阅读