本文主要是介绍页面显示图片列表，点击放大和缩小展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Java后台方法，从数据库中取出存储文件的地址信息，将string类型转换成list
@GetMapping("/detail/{id}")public String detail(@PathVariable("id") Long id, ModelMap mmap) {TbOutKeyStorage tbOutKeyStorage = tbOutKeyStorageService.selectTbOutKeyStorageById(id);String annexPath = tbOutKeyStorage.getAnnexPath();List<String> list = new ArrayList<>();if (annexPath!=null && !annexPath.isEmpty()){list = Arrays.asList(annexPath.split(","));}mmap.put("businessImgList",list);return prefix + "/detail";}
前端Html代码，需要通过下载方法加文件路径获取图片信息
<div class="col-sm-6"><div class="vertical-timeline-block"><div class="vertical-timeline-icon navy-bg"><i class="fa fa-photo"></i></div><div class="vertical-timeline-content"><h2>业务手续</h2><div class="vertical-timeline-content" th:each="imgItem:${businessImgList}"><img style="width: 95%" th:src="@{/common/downloadChart(fileName=${imgItem})}" onclick="previewImagePop(this)"/></div></div></div></div>
</div>
前端Js点击缩放方法，图片右上角有x，或者点击空白缩小图片
//预览
function previewImagePop(_that) {// 图片预览事件var src = $(_that).attr('src');var target = $(_that).data('target') || "self";if ($.common.equals("self", target)) {var height = $(_that).data('height') || "auto";var width = $(_that).data('width') || "auto";layer.open({id: "div_img", /* 给个固定的ID，方便后面查找元素 */title: false,type: 1,closeBtn: true, /* 关闭按钮 */shadeClose: true, /* 点击阴影区域关闭弹窗 */area: ['auto', 'auto'],content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",success: function (layero, index) {// 图片加载完成后，再次处理图片宽度$('#div_img > img', layero).on('load', function () {// 获取图片宽和高let imgElement = $('#div_img > img', layero);let imgWidth = imgElement.width();let imgHeight = imgElement.height();// 获取 mainContent 宽和高let mainContent = $('#content-main', window.parent.document);if (mainContent.length <= 0) {/* 修正mainContent：如果在新窗口中打开链接时，没有父级窗口 */mainContent = $(window);}let mainContentWidth = mainContent.width();let mainContentHeight = mainContent.height();/* 计算图片的宽度 */let newImgWidth = imgWidth;/* 图片超宽时，将图片的宽度设置为当前窗口的95%。图片高度auto */if (imgWidth > mainContentWidth * 0.95) {newImgWidth = mainContentWidth * 0.95;}/* 图片超高时，计算一个让图片不超高的宽度。图片高度auto */if (imgHeight > mainContentHeight * 0.95) {let tmpNewImgWidth = imgWidth * (mainContentHeight * 0.95 / imgHeight);if (newImgWidth > tmpNewImgWidth) {newImgWidth = tmpNewImgWidth;}}/* 重新设置图片的宽度、高度 */// 图片容器的高度设置为auto，不设置时，该容器的高度为固定值$("#div_img", layero).height('auto');// 指定图片的宽度$("#div_img > img", layero).attr({width: newImgWidth});// 很重要。触发窗口的 resize 事件，让 layer 调整位置。$(window).resize();});}});} else if ($.common.equals("blank", target)) {window.open(src);}
}//移除
function deleteImg(_that) {$(_that).closest('div').remove();
}
这篇关于页面显示图片列表，点击放大和缩小展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
