<!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>这是之前的页面，新写的页面图片展示时大小有
问题，如何修改能让其适配页面大小，
本文介绍了一种使用JavaScript实现IFrame自适应高度的方法。通过定时调整IFrame的高度以匹配其内容的实际高度，确保了良好的用户体验并提高了页面加载效率。
扫一扫
2529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
