<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<title>图片预览</title>
<link rel="stylesheet" type="text/css" href="themes/default/
easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.
easyui.min.js"></script>
<style>
#image
-container {
/* width: 800px;
height: 600px; */
margin: 0 auto;
border: 1px solid #ccc;
display:flex;
justify
-content:center;
background:#ccc
position: relative;
overflow: hidden;
}
#image {
position: absolute;
top: 50
%;
left: 50
%;
/* transform: translate(
-50
%,
-50
%); */
}
#tooptip{
width:30px;
height:30px
}
#download
-section a {
display: block !important;
margin
-bottom: 5px;
}
</style>
</head>
<body>
<div class="
easyui-tabs" style="width:
100%;height:
100%">
<div title="文件预览" style="height:
100%;background:#ccc;display:flex;justify
-content:center;align
-items: center;">
<div style="padding:20px 0;position: absolute;background:#ccc;bottom:7px;z
-index:999999;width:97
%;display:flex;justify
-content:center;align
-items: center;border
-top:2px solid #333">
<img id='tooptip' alt="" src="/image/mini/big.png" onclick="zoomIn()" style='width:40px;margin
-right:25px'></img>
<img id='tooptip' alt="" src="/image/mini/small.png" onclick="zoomOut()" style='width:40px;margin
-right:25px'></img>
<img id='tooptip' alt="" src="/image/mini/right.png" onclick="rotateRight()" style='width:40px;margin
-right:25px'></img>
<img id='tooptip' alt="" src="/image/mini/left_arror.png"onclick="rotateLeft()" style='width:40px;margin
-right:25px'></img>
<img id='tooptip' alt="" src="/image/mini/up.png" onclick="prevImage()" style='width:40px;margin
-right:25px'></img>
<span style='border:3px solid black;width:30px;height:30px;display:inline
-block;font
-weight:700;text
-align:center;line
-height:30px;font
-size:18px;' id='indexfy'></span>
<span style='font
-weight:700;font
-size:30px;margin:0 20px;display:inline
-block'>of</span>
<span style='font
-weight:700;margin
-right:25px;font
-size:30px;display:inline
-block;width:30px;height:30px;text
-align:center;line
-height:30px' id='allindex'></span>
<img id='tooptip' alt="" src="/image/mini/down.png" onclick="nextImage()" style='width:40px;margin
-right:25px'>
</img>
</div>
<img id="image" src="" alt="图片">
</div>
<div title="文件下载" style="padding:10px" id="download
-section">
<!
-- 图片下载链接将添加到这里
-->
</div>
</div>
<script type='text/javascript'>
// 图片列表
var images = [];
// 当前图片索引
var currentIndex = 0;
// 缩放比例
var scale = 0.6;
// 旋转角度
var rotation = 0;
$('#indexfy').text(currentIndex + 1)
// 初始化图片
function initImage() {
if (images.length === 0) {
console.log('图片列表为空');
return;
}
var img = document.getElementById('image');
img.src = images[currentIndex];
scale = 0.6;
rotation = 0;
img.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
}
// 放大图片
function zoomIn() {
scale += 0.1;
var img = document.getElementById('image');
img.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
}
// 缩小图片
function zoomOut() {
if (scale > 0.1) {
scale
-= 0.1;
var img = document.getElementById('image');
img.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
}
}
// 右转图片
function rotateRight() {
rotation += 90;
var img = document.getElementById('image');
img.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
}
// 左转图片
function rotateLeft() {
rotation
-= 90;
var img = document.getElementById('image');
img.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
}
// 上一张图片
function prevImage() {
if (images.length === 0) {
console.log('图片列表为空，无法切换');
return;
}
currentIndex = (currentIndex
- 1 + images.length)
% images.length;
$('#indexfy').text(currentIndex + 1)
initImage();
}
// 下一张图片
function nextImage() {
if (images.length === 0) {
console.log('图片列表为空，无法切换');
return;
}
currentIndex = (currentIndex + 1)
% images.length;
$('#indexfy').text(currentIndex + 1)
initImage();
}
var params = vsparams();
params = params || '';
vsportal('ZdAction.getFilesById', { ids: params }, function (response) {
if (response.status == false) {
vsalert('系统提示', response.message, 'error');
return false;
}
var data = response.data;
if (data.length == 0) {
vsalert('系统提示', '没有加载到附件信息！', 'error');
return false;
} else {
$('#allindex').text(data.length)
data.forEach(item => {
if (item.path.includes('https://data
-migration
-prod
-2025.obs.cn
-south
-1.myhuaweicloud.com/')) {
} else {
item.path = 'https://data
-migration
-prod
-2025.obs.cn
-south
-1.myhuaweicloud.com/' + item.path;
}
images.push(item.path);
});
if (images.length > 0) {
initImage();
}
// 在文件下载板块添加图片地址链接
var downloadSection = document.getElementById('download
-section');
images.forEach(function(imageUrl) {
var link = document.createElement('a');
link.style.display = 'block'
link.href = imageUrl;
link.textContent = imageUrl;
link.download = imageUrl.split('/').pop(); // 设置下载文件名
downloadSection.appendChild(link);
});
}
});
</script>
</body>
</html>
这是新写的页面，<!DOCTYPE html>
<meta charset="UTF
-8">
<div class="
easyui-layout" data
-options="fit:true">
<div data
-options="region:'center'" style="padding: 1px;overflow: hidden;">
<div id="IDIZMPBRVY"></div>
</div>
</div>
<script type="text/javascript">
var params = null;
$(function(){
params = vsparams();
params = params || '';
$('#IDIZMPBRVY').tabs({
fit:true,
onAdd:function(title, index){
var panel = $(this).tabs('getTab', index);
var container = panel.find('
iframe');
var region = container.parent();
region.css('overflow', 'hidden');
}
});
var scpath = xenv.scpath;
vsdelay(function(){
vspost(scpath + '/appendix/loads.jspx', {ids:params}, function(response){
if(response.status == false){
vsalert('系统提示', response.message, 'error');
return false;
}
var data = response.data;
if(data.length == 0){
vsalert('系统提示', '没有加载到附件信息！', 'error');
return false;
}
var viewers = $('#IDIZMPBRVY').data('viewers');
if(viewers && viewers.length > 0){
viewers = viewers.sort(function(a, b){
return a.index
- b.index;
});
var files = [];
$.each(data, function(index, item){
files.push(new vsfile(item));
});
$.each(viewers, function(index, viewer){
try{
viewer.handle(files);
}catch(e){
console.log(e);
}
});
}
$('#IDIZMPBRVY').tabs('select', 0);
});
});
});
</script>这是之前的页面，新写的页面图片展示时大小有
问题，如何修改能让其适配页面大小，
本文介绍了解决iframe在页面布局中出现空白间隙的三种方法：调整vertical-align属性、设置父div的font-size为0以及将iframe的display属性更改为block。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
