首页
关于
留言
友情链接
推荐
粽子SHOP
Search
1
粽子SHOP即时到账 微信插件(MyWechat)
4,850 阅读
2
PS人像美颜插件 DR5.0增强版 一键人像磨皮/美白/高低频
4,077 阅读
3
彩虹聚合登录API源码/上元二开 QQ互联分发
2,914 阅读
4
Windows Navicat Premium16.3.2 免安装 绿色汉化版
2,745 阅读
5
LayuiTable导出所有数据,无需修改后端代码
2,435 阅读
程序源码
PHP源码
HTML源码
精品程序
易语言源码
活动资讯
技术分享
实用代码
实用工具
学习笔记
PHP笔记
前端笔记
uniapp
Python
逆向
docker
thinkPHP
登录
Search
标签搜索
python
typescript
swoole
docker
thinkphp6
php
composer
composer命令
tp6
tp中间件
vue
node.js
粽子shop
thinkSwoole
timi
王者荣耀
王者荣耀ios扫码
layer
layer图片预览
layer图片
烂掉的ay
累计撰写
92
篇文章
累计收到
939
条评论
首页
栏目
程序源码
PHP源码
HTML源码
精品程序
易语言源码
活动资讯
技术分享
实用代码
实用工具
学习笔记
PHP笔记
前端笔记
uniapp
Python
逆向
docker
thinkPHP
页面
关于
留言
友情链接
推荐
粽子SHOP
搜索到
1
篇与
layer图片
的结果
2022-05-20
layui.layer 预览图片自适应大小
引入layer,给图片增加一个点击事件就OK了 var src = $(this).attr("src"); lookPicture(src,1); /** * layer 图片预览自适应 * @param resourcesUrl * @param resourcesType 传 1 就OK了 */ function lookPicture(resourcesUrl,resourcesType) { // resourcesUrl:接受的图片地址,resourcesType之前定义的数据类型(可省略) if (resourcesUrl == "") { layer.msg("没有发现图片!"); return; } var img = new Image(); img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。 //避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。 var max_height = $(window).height() - 100; var max_width = $(window).width(); //rate1,rate2,rate3 三个比例中取最小的。 var rate1 = max_height / img.height; var rate2 = max_width / img.width; var rate3 = 1; var rate = Math.min(rate1, rate2, rate3); //等比例缩放 var imgHeight = img.height * rate; //获取图片高度 var imgWidth = img.width * rate; //获取图片宽度 var imgHtml = "<img src='" + resourcesUrl + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>"; //弹出层 if (resourcesType ==1 ) { layer.open({ type:1,//可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) shade: 0.6, // maxmin: true, anim: 2, title: false, // title: '图片预览',// title: false, area: ['auto', 'auto'], // skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: imgHtml }); } } img.src = resourcesUrl; }
2022年05月20日
1,491 阅读
0 评论
2 点赞