先上效果，代碼在下面

?

?

?

<template><!-- 圖片列表 --><div class="image-list"><img:src="imageSrc"v-for="(imageSrc, index) in images":key="index"@click="openImage(index)"@error="handleImageError(index)"alt="Thumbnail Image"/></div><!-- 點擊的圖片 --><divv-if="selectedImage"class="enlarged-image-box"@wheel="onZoom"@click="closeImage"><img:src="selectedImage"draggable="true"@dragstart="onDragStart"@dragend="onDragEnd"@load="onImageLoad"@click.stopref="enlargedImageRef":style="{left: `${imageLeft}px`,top: `${imageTop}px`,transform: `translate(-50%, -60%) scale(${scale}) ${isFlippedX ? 'scaleX(-1)' : 'scaleX(1)'} ${isFlippedY ? 'scaleY(-1)' : 'scaleY(1)'} rotate(${rotation}deg)`,}"/></div><!-- 控制按鈕 --><div class="control-buttons" v-if="selectedImage" v-show="areControlsVisible"><img:src="buttonSrc"v-for="(buttonSrc, index) in controlButtons":key="index"@click="onControlButtonClick(index)"@error="handleButtonError(index)":class="{ active: activeControlIndex === index }"alt="Control Button"/></div><!-- 中間顯示的倍數 --><div class="zoom-percentage" v-if="isZoomVisible">{{ zoomPercentage.toFixed(0) }}%</div><!-- 全屏的背景圖片 --><div class="fullscreen-overlay" v-if="isFullscreen"><img :src="selectedImage" class="fullscreen-image" /></div><!-- 點擊叉號 --><div v-if="selectedImage" @click="closeImage" class="close-button"><img src="/assets/叉號.svg" class="close-icon" /></div><!-- 最下面顯示的圖片 --><div class="thumbnail-container" v-if="selectedImage"><img:src="imageSrc"v-for="(imageSrc, index) in images":key="index":style="{ transform: `translateX(${-thumbnailOffsetLeft}px)` }"class="thumbnail"@click="onThumbnailClick(index)":class="{ active: activeThumbnailIndex === index }"/></div>
</template><script setup>
import { ref, computed } from "vue";// 狀態變量
const selectedImage = ref(""); // 當前顯示的大圖
const scale = ref(1); // 縮放比例
const isZoomVisible = ref(false); // 控制倍數顯示與隱藏
const zoomTimeout = ref(null); // 定時器 ID
const oneToOneScale = ref(1); // 1:1 縮放比例
const imageLeft = ref(window.innerWidth / 2); // 圖片初始 left
const imageTop = ref(window.innerHeight / 2); // 圖片初始 top
const startPosition = ref({ x: 0, y: 0 }); // 拖拽開始時的鼠標位置
const isAtOneToOne = ref(false); // 是否處于1:1狀態
const initialScale = ref(1); // 初始縮放比例
const lastScale = ref(1); // 上一次的縮放比例
const activeControlIndex = ref(null); // 當前激活的控制按鈕索引
const activeThumbnailIndex = ref(null); // 當前激活的縮略圖索引
const rotation = ref(0); // 圖片旋轉角度
const isFullscreen = ref(false); // 全屏遮罩
const areControlsVisible = ref(true); // 控制按鈕顯示與隱藏
const isFlippedX = ref(false); // 是否水平翻轉
const isFlippedY = ref(false); // 是否上下翻轉
const thumbnailOffsetLeft = ref(0); // 縮略圖左側的偏移量
const zoomPercentage = computed(() => scale.value * initialScale.value * 100); // 計算屬性：百分比顯示
const enlargedImageRef = ref(null);// 圖片數據
const images = ref(["/assets/tibet-1.jpg","/assets/tibet-2.jpg","/assets/tibet-3.jpg","/assets/tibet-4.jpg","/assets/tibet-5.jpg","/assets/tibet-6.jpg","/assets/tibet-7.jpg","/assets/tibet-8.jpg","/assets/tibet-9.jpg",
]);
// 控制按鈕數據
const controlButtons = ref(["/assets/加號.svg", // 加號"/assets/減號.svg", // 減號"/assets/1_1.svg", // 1:1"/assets/刷新.svg", // 刷新"/assets/左箭頭.svg", // 左箭頭"/assets/播放.svg", // 播放"/assets/右箭頭.svg", // 右箭頭"/assets/左旋轉.svg", // 左旋轉"/assets/右旋轉.svg", // 右旋轉"/assets/左右箭頭.svg", // 左右箭頭"/assets/上下箭頭.svg", // 上下箭頭
]);
// 點擊關閉
const closeImage = () => {selectedImage.value = "";
};
// 重置所有相關狀態的函數
const resetImageState = () => {scale.value = 1;imageLeft.value = window.innerWidth / 2;imageTop.value = window.innerHeight / 2;isAtOneToOne.value = false;rotation.value = 0;isFlippedX.value = false;isFlippedY.value = false;activeControlIndex.value = null;
};
// 圖片點擊事件
const openImage = (index) => {activeThumbnailIndex.value = index;selectedImage.value = images.value[index];resetImageState(); // 重置所有狀態
};
// 圖片加載完成事件，用于計算初始縮放比例
const onImageLoad = () => {if (enlargedImageRef.value) {const naturalWidth = enlargedImageRef.value.naturalWidth;const rect = enlargedImageRef.value.getBoundingClientRect();const displayedWidth = rect.width;// 計算初始縮放比例（顯示尺寸與自然尺寸的比例）initialScale.value = displayedWidth / naturalWidth;// 初始化縮放比例為1scale.value = 1;// 設置 1:1 縮放比例oneToOneScale.value = 1 / initialScale.value;}
};
// 拖拽開始事件
const onDragStart = (event) => {startPosition.value = { x: event.clientX, y: event.clientY }; // 記錄開始時的鼠標位置
};
// 拖拽結束事件
const onDragEnd = (event) => {imageLeft.value += event.clientX - startPosition.value.x; // 更新元素的左偏移量imageTop.value += event.clientY - startPosition.value.y; // 更新元素的上偏移量
};
// 圖片縮放處理函數
const onZoom = (event) => {isZoomVisible.value = true;// 重置定時器clearTimeout(zoomTimeout.value);zoomTimeout.value = setTimeout(() => {isZoomVisible.value = false;}, 1000);// 判斷滾動方向并設置新的縮放比例if (event.deltaY < 0) {// 向上滾動scale.value += 0.1;} else {// 向下滾動scale.value -= 0.1;scale.value = Math.max(scale.value, 0.3); // 確保最小縮放比例為0.3}
};// 控制按鈕點擊事件
const onControlButtonClick = (index) => {switch (index) {case 0: // 加號if (scale.value < 3) {// 最大縮放比例為3scale.value += 0.1;isZoomVisible.value = true;}break;case 1: // 減號if (scale.value > 0.5) {// 最小縮放比例為0.5scale.value -= 0.1;scale.value = Math.max(scale.value, 0.1);isZoomVisible.value = true;}break;case 2: // 1:1if (!isAtOneToOne.value) {lastScale.value = scale.value;scale.value = oneToOneScale.value;isAtOneToOne.value = true;} else {scale.value = lastScale.value;isAtOneToOne.value = false;}isZoomVisible.value = true;break;case 3: // 刷新resetImageState(); // 重置所有狀態isZoomVisible.value = true;break;case 4: // 左箭頭navigateToPreviousImage();break;case 5: // 全屏toggleFullscreen();break;case 6: // 右箭頭navigateToNextImage();break;case 7: // 左旋轉rotation.value -= 90;break;case 8: // 右旋轉rotation.value += 90;break;case 9: // 左右翻轉isFlippedX.value = !isFlippedX.value; // 切換翻轉狀態break;case 10: // 上下翻轉isFlippedY.value = !isFlippedY.value; // 切換翻轉狀態break;default:break;}// 設置當前激活的控制按鈕索引activeControlIndex.value = index;// 重置定時器clearTimeout(zoomTimeout.value);zoomTimeout.value = setTimeout(() => {isZoomVisible.value = false;}, 1000);
};// 導航到上一張圖片
const navigateToPreviousImage = () => {if (activeThumbnailIndex.value > 0) {activeThumbnailIndex.value -= 1;} else {// 跳轉到最后一張圖片activeThumbnailIndex.value = images.value.length - 1;}selectImage(activeThumbnailIndex.value);
};// 導航到下一張圖片
const navigateToNextImage = () => {if (activeThumbnailIndex.value < images.value.length - 1) {activeThumbnailIndex.value += 1;} else {// 跳轉到第一張圖片activeThumbnailIndex.value = 0;}selectImage(activeThumbnailIndex.value);
};// 選擇圖片并更新狀態
const selectImage = (index) => {selectedImage.value = images.value[index];activeThumbnailIndex.value = index;resetImageState(); // 重置所有狀態
};// 全屏切換函數
const toggleFullscreen = () => {const element = document.documentElement; // 全屏元素可以是 `document.documentElement`，也可以是圖片元素等if (!document.fullscreenElement &&!document.webkitFullscreenElement &&!document.mozFullScreenElement &&!document.msFullscreenElement) {// 進入全屏if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}isFullscreen.value = true;areControlsVisible.value = false;} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}isFullscreen.value = false;areControlsVisible.value = true;}
};// 監聽全屏變化以確保遮罩層正確隱藏
document.addEventListener("fullscreenchange", () => {if (!document.fullscreenElement) {isFullscreen.value = false; // 確保退出全屏時隱藏遮罩層areControlsVisible.value = true;}
});// 點擊縮略圖事件
const onThumbnailClick = (index) => {activeThumbnailIndex.value = index;selectedImage.value = images.value[index];const thumbnailWidth = 32; // 圖片寬度（30px）加上左右間距（2px）const centerIndex = 4; // 中間顯示第5張圖片（索引為4）if (index <= centerIndex) {thumbnailOffsetLeft.value = (centerIndex - index) * thumbnailWidth;} else {// 點擊右邊的圖片，調整右邊距，清零左邊距thumbnailOffsetLeft.value = (centerIndex - index) * thumbnailWidth;}resetImageState(); // 重置所有狀態
};// 錯誤處理函數：圖片加載失敗
const handleImageError = (index) => {console.error(`圖片加載失敗: ${images.value[index]}`);// 可選：設置為占位圖images.value[index] = "/assets/placeholder.png";
};// 錯誤處理函數：控制按鈕圖片加載失敗
const handleButtonError = (index) => {console.error(`按鈕圖片加載失敗: ${controlButtons.value[index]}`);// 可選：設置為占位圖controlButtons.value[index] = "/assets/button-placeholder.png";
};
</script><style scoped>
/* 圖片列表 */
.image-list {width: 540px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-wrap: wrap;gap: 4px;
}
.image-list img {width: 170px;height: 170px;cursor: pointer;object-fit: cover;border-radius: 4px;transition: transform 0.3s;
}/* 放大的圖片框架 */
.enlarged-image-box {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5); /* 背景加深 */display: flex;justify-content: center;align-items: center;z-index: 1003;
}/* 放大的圖片 */
.enlarged-image-box img {height: 70%;position: absolute;z-index: 9999;cursor: grab; /* 鼠標樣式為抓取 */user-select: none; /* 禁止用戶選擇圖片 */transition: transform 0.3s ease; /* 平滑縮放 */
}/* 控制按鈕圖片 */
.control-buttons {position: fixed;top: 85%;left: 50%;transform: translate(-50%);display: flex;z-index: 1008;
}
.control-buttons img {width: 20px;height: 20px;background-color: rgba(0, 0, 0, 0.5);z-index: 5;padding: 3px;margin-right: 2px;border-radius: 50%;cursor: pointer;transition: background-color 0.3s, transform 0.3s;
}
.control-buttons img.active {background-color: rgba(0, 0, 0, 0.8);
}/* 激活縮略圖 */
.thumbnail-container .thumbnail.active {filter: brightness(100%) !important;
}/* 中間顯示的倍數 */
.zoom-percentage {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: white;border-radius: 5px;padding: 8px 12px;font-size: 18px;z-index: 1111;opacity: 0.9;transition: opacity 0.3s;
}/* 全屏遮罩 */
.fullscreen-overlay {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background-color: black;z-index: 1010;
}
.fullscreen-image {height: 100%;position: fixed;top: 50%;left: 50%;z-index: 2000;transform: translate(-50%, -50%);
}/* 點擊叉號 */
.close-button {background-color: rgba(0, 0, 0, 0.7);position: fixed;right: 0;top: 0;border-bottom-left-radius: 50px;padding: 4px 4px 5px 8px;z-index: 1005;
}
.close-icon {height: 17px;width: 17px;
}/* 最下面顯示的縮略圖 */
.thumbnail-container {background-color: rgba(0, 0, 0, 0.5);position: fixed;bottom: 0;left: 0;height: 50px;width: 100vw;display: flex;justify-content: center;z-index: 1008;
}
.thumbnail-container .thumbnail {height: 100%;width: 30px;margin-right: 2px;filter: brightness(70%);cursor: pointer;transition: filter 0.3s;
}
.thumbnail-container .thumbnail:hover {filter: brightness(50%);
}
.thumbnail-container {transition: transform 0.8s ease;
}
</style>