<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
图片预览</title>
<!-- 引入
EasyUI 的 CSS 和 JavaScript 文件 -->
<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;
position: relative;
overflow: hidden;
}
/*
图片样式 */
#image {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!--
EasyUI 布局 -->
<div class="
easyui-layout" data-options="fit:true">
<!-- 顶部工具栏 -->
<div data-options="region:'north',border:false" style="height:30px;padding:5px;">
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-zoom-in'" onclick="zoomIn()">放大</a>
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-zoom-out'" onclick="zoomOut()">缩小</a>
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-rotate-right'" onclick="rotateRight()">右转</a>
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-rotate-left'" onclick="rotateLeft()">左转</a>
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-prev'" onclick="prevImage()">上一张</a>
<a href="#" class="
easyui-
linkbutton" data-options="
iconCls:'
icon-next'" onclick="nextImage()">下一张</a>
</div>
<!-- 中间
图片显示区域 -->
<div data-options="region:'center',border:false" id="image-container">
<img id="image" src="" alt="
图片">
</div>
</div>
<script type="text/javascript">
//
图片列表
var images = [];
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;
}
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);
})
console.log(images,'111')
});
// 当前
图片索引
var currentIndex = 0;
// 缩放比例
var scale = 1;
// 旋转角度
var rotation = 0;
// 初始化
图片
function initImage() {
var img = document.getElementById('image');
img.src = images[currentIndex];
scale = 1;
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() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
initImage();
}
// 下一张
图片
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
initImage();
}
// 页面加载完成后初始化
图片
$(document).ready(function() {
initImage();
});
</script>
</body>
</html>在修改一下，再接口请求完以后再走下面的流程
本文介绍了一种在代码中为按钮设置图标的实现方法。通过定义一个可绑定的变量 onFiltericon，并将其作为按钮样式的图标属性，实现了动态设置按钮图标的灵活性。
扫一扫
1971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
