首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
搜索
搜索
热门搜索
BingGan
她说爱你,没说只爱你!
累计撰写
93
篇文章
累计收到
32
条评论
首页
导航
首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
旗下站点
Bg‖ 在线音乐
Bg‖ Mail邮件
Bg‖ SEO外链
包含标签 【layer】 的文章
2024-3-19
layui.layer实现预览图片自适应大小
使用方法: 引入layer,给图片增加一个点击事件即可。 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; }
2024年-3月-19日
279 阅读
0 评论
代码笔记