layui的layer.open()方法查看缩略图 原图缩放

写在前面

 

需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.

 

操作步骤

 

官方文档

点击跳转

关键属性

1. type: 设置type=1, 以页面的形式展示图片

2.  content: 设置content即页面中的内容

 

3. offset: 设置页面(图片)的展示坐标

 

4. area: 设置展示区域宽高 auto-自适应

 

看到这里, 可以联想到将type设置为1-页面, content设置成<img>标签然后把图片src传进来就可以展示图片了.

接下来是设置图片显示的坐标(offset属性), 以及图片展示区域大小(area属性), 图片的宽高其实可以在<img>标签中动态拼接.

 

关键代码

// 浏览器窗口width height均/4 设置为图片展示的左上角坐标
var x = document.documentElement.clientWidth/4;
var y = document.documentElement.clientHeight/4;
// 图片的src