html+js实现图片的放大缩小等比缩放翻转，自动播放切换，顺逆时针旋转

server/2024/11/26 19:30:09/
htmledit_views">

效果图：

 

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片预览</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;text-align: center;background-color: #f4f4f4;}.thumbnails {display: flex;justify-content: center;margin: 20px;}.thumbnail {width: 80px;height: 80px;margin: 5px;object-fit: cover;border: 2px solid transparent;cursor: pointer;transition: transform 0.2s;}.thumbnail:hover {transform: scale(1.1);}.thumbnail.active {border-color: #007bff;}.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: 1000;justify-content: center;align-items: center;flex-direction: column;}.modal.open {display: flex;}.image-container {max-width: 90%;max-height: 70%;overflow: hidden;position: relative;}.display-image {max-width: 100%;max-height: 100%;transition: transform 0.3s;}.controls {margin-top: 20px;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;}.icon-button {display: flex;justify-content: center;align-items: center;width: 24px;height: 24px;background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */color: white;border-radius: 50%;font-size: 20px;cursor: pointer;transition: background-color 0.3s, transform 0.2s;}.icon-button:hover {background-color: rgba(0, 0, 0, 0.8); /* 悬停时更深的黑色 */transform: scale(1.1);}.icon-button:active {transform: scale(0.9);}.icon-button:disabled {background-color: rgba(0, 0, 0, 0.2); /* 禁用时更浅 */cursor: not-allowed;}</style>
</head>
<body>
<h1>图片预览</h1><!-- 缩略图 -->
<div class="thumbnails" id="thumbnailContainer"><img src="imgs/wallhaven-kx5v57.jpg" class="thumbnail" alt="Thumbnail 1"><img src="imgs/wallhaven-wegll6.png" class="thumbnail" alt="Thumbnail 2"><img src="imgs/wallhaven-9m5mk1.png" class="thumbnail" alt="Thumbnail 3">
</div><!-- 弹窗 -->
<div class="modal" id="imageModal"><div class="image-container"><img src="" alt="Current Image" id="currentImage" class="display-image"></div><div class="controls"><div class="icon-button" id="zoomInBtn" title="放大"><svg t="1732241294803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7668" width="16" height="16"><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" fill="#ffffff" p-id="7669"></path></svg></div><div class="icon-button" id="zoomOutBtn" title="缩小"><svg t="1732241472622" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9692" width="16" height="16"><path d="M1.024 448.512h1024v128h-1024z" fill="#ffffff" p-id="9693"></path></svg></div><div class="icon-button" id="resetBtn" title="1:1 缩放"><svg t="1732241553547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13299" width="16" height="16"><path d="M288 149.333333v725.333334h-85.333333V250.368L136.405333 283.52 98.24 207.146667 213.930667 149.333333H288zM896 149.333333h-74.069333l-115.669334 57.834667 38.144 76.330667L810.666667 250.368V874.666667h85.333333V149.333333z m-320 170.666667h-106.666667v106.666667h106.666667v-106.666667z m0 277.333333h-106.666667v106.666667h106.666667v-106.666667z" p-id="13300" fill="#ffffff"></path></svg></div><div class="icon-button" id="flipBtn" title="翻转"><svg t="1732241626557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15368" width="16" height="16"><path d="M962.074 490.554L647.271 355.638l125.831-89.881c-65.56-69.108-157.968-112.493-260.747-112.493-174.244 0-319.503 123.884-352.634 288.369l-83.949-34.777C123.56 209.825 300.628 63.32 512.355 63.32c132.973 0 252.063 58.09 334.393 149.833l115.326-82.375v359.776z m-710.47 269.773c65.556 69.108 157.973 112.488 260.752 112.488 174.918 0 320.546-124.873 352.931-290.307l83.868 35.874c-47.481 197.458-224.77 344.377-436.799 344.377-132.973 0-252.068-58.086-334.398-149.828l-115.322 82.37V535.525L377.44 670.441l-125.836 89.886z" p-id="15369" fill="#ffffff"></path></svg></div><div class="icon-button" id="prevBtn" title="上一张"><svg t="1732241691822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17732" width="16" height="16"><path d="M658.29178 1003.504117l223.006914 0L398.119373 520.342595 881.298746 0 658.291782 0 175.112507 520.342595 658.29178 1003.504117z" p-id="17733" fill="#ffffff"></path></svg></div><div class="icon-button" id="autoPlayBtn" title="自动播放"><svg t="1732241717970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18888" width="16" height="16"><path d="M891.161 512l-749.992 450v-900l749.992 450z" p-id="18889" fill="#ffffff"></path></svg></div><div class="icon-button" id="nextBtn" title="下一张"><svg t="1732241665540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17426" width="16" height="16"><path d="M881.298746 520.342595 398.119373 0 175.112486 0 658.29178 520.342595 175.112507 1003.504117l223.006914 0L881.298746 520.342595z" p-id="17427" fill="#ffffff"></path></svg></div><div class="icon-button" id="rotateClockwiseBtn" title="顺时针旋转"><svg t="1732241858925" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21128" width="16" height="16"><path d="M0 511.999147c0 282.794195 232.618279 511.999147 519.508467 511.999146a521.812464 521.812464 0 0 0 319.743468-108.543819l-89.343852-93.86651a391.679347 391.679347 0 0 1-230.399616 74.410543c-215.295641 0-389.631351-171.861047-389.63135-383.99936 0-212.05298 174.421043-383.99936 389.63135-383.99936 210.772982 0 382.292696 165.119725 389.119352 371.199381H727.294788l233.72761 255.999573 233.727611-255.999573h-156.15974C1031.678281 222.463629 801.96133 0 519.593801 0 232.703612 0 0 229.204951 0 511.999147z" fill="#ffffff" p-id="21129"></path></svg></div><div class="icon-button" id="rotateCounterClockwiseBtn" title="逆时针旋转"><svg t="1732241885059" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22261" width="16" height="16"><path d="M1194.664676 511.999147c0 282.794195-232.618279 511.999147-519.508468 511.999146a521.812464 521.812464 0 0 1-319.743467-108.543819l89.343851-93.86651a391.679347 391.679347 0 0 0 230.399616 74.410543c215.295641 0 389.631351-171.861047 389.631351-383.99936 0-212.05298-174.421043-383.99936-389.631351-383.99936-210.772982 0-382.292696 165.119725-389.119351 371.199381h181.418364l-233.727611 255.999573L0 499.199168h156.15974C162.986395 222.463629 392.703345 0 675.070875 0 961.961063 0 1194.664676 229.204951 1194.664676 511.999147z" fill="#ffffff" p-id="22262"></path></svg></div><div class="icon-button" id="closeBtn" title="关闭"><svg t="1732241912849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23389" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="23390"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#ffffff" p-id="23391"></path></svg></div></div></div><script>const thumbnails = document.querySelectorAll('.thumbnail');const modal = document.getElementById('imageModal');const currentImage = document.getElementById('currentImage');const zoomInBtn = document.getElementById('zoomInBtn');const zoomOutBtn = document.getElementById('zoomOutBtn');const resetBtn = document.getElementById('resetBtn');const rotateClockwiseBtn = document.getElementById('rotateClockwiseBtn');const rotateCounterClockwiseBtn = document.getElementById('rotateCounterClockwiseBtn');const flipBtn = document.getElementById('flipBtn');const prevBtn = document.getElementById('prevBtn');const nextBtn = document.getElementById('nextBtn');const autoPlayBtn = document.getElementById('autoPlayBtn');const closeBtn = document.getElementById('closeBtn');let currentIndex = 0;let zoom = 1;let rotation = 0;let flip = 1;let autoPlayInterval;const images = Array.from(thumbnails).map(thumbnail => thumbnail.src);function openModal(index) {currentIndex = index;updateImage();modal.classList.add('open');}function closeModal() {modal.classList.remove('open');clearInterval(autoPlayInterval);}function updateImage() {currentImage.src = images[currentIndex];currentImage.style.transform = `scale(${zoom * flip}, ${zoom})rotate(${rotation}deg)`;thumbnails.forEach((thumbnail, index) => {thumbnail.classList.toggle('active', index === currentIndex);});}function zoomIn() {zoom += 0.1;updateImage();}function zoomOut() {zoom = Math.max(0.1, zoom - 0.1);updateImage();}function resetImage() {zoom = 1;rotation = 0;flip = 1;updateImage();}function rotateClockwise() {rotation += 90;updateImage();}function rotateCounterClockwise() {rotation -= 90;updateImage();}function flipImage() {flip *= -1;updateImage();}function showPrevious() {currentIndex = (currentIndex - 1 + images.length) % images.length;updateImage();}function showNext() {currentIndex = (currentIndex + 1) % images.length;updateImage();}function toggleAutoPlay() {if (autoPlayInterval) {clearInterval(autoPlayInterval);autoPlayInterval = null;autoPlayBtn.textContent = '▶';} else {autoPlayInterval = setInterval(showNext, 3000);autoPlayBtn.textContent = '∥';}}thumbnails.forEach((thumbnail, index) => {thumbnail.addEventListener('click', () => openModal(index));});zoomInBtn.addEventListener('click', zoomIn);zoomOutBtn.addEventListener('click', zoomOut);resetBtn.addEventListener('click', resetImage);rotateClockwiseBtn.addEventListener('click', rotateClockwise);rotateCounterClockwiseBtn.addEventListener('click', rotateCounterClockwise);flipBtn.addEventListener('click', flipImage);prevBtn.addEventListener('click', showPrevious);nextBtn.addEventListener('click', showNext);autoPlayBtn.addEventListener('click', toggleAutoPlay);closeBtn.addEventListener('click', closeModal);</script>
</body>
</html>


http://www.ppmy.cn/server/145132.html

相关文章

Stable Diffusion入门教程

Stable Diffusion入门教程

要入门Stable Diffusion&#xff0c;你可以按照以下步骤进行&#xff1a; 1. 安装Stable Diffusion 获取安装包&#xff1a;你可以从GitHub上的 Stable Diffusion Web UI开源地址获取安装包。 一键启动程序包&#xff1a;如果你是小白不会装&#xff0c;可以使用国内秋葉aaaki开…
阅读更多...
Leetcode148. 排序链表(HOT100)

Leetcode148. 排序链表(HOT100)

链接 我写的错误代码&#xff1a; class Solution { public:ListNode* sortList(ListNode* head) {if (!head || !head->next)return head;ListNode* fast head;ListNode* slow head;while (fast&&fast->next) {fast fast->next->next;slow slow->…
阅读更多...
Spring Boot 3.0废弃了JavaEE，改用了Jakarta EE

Spring Boot 3.0废弃了JavaEE，改用了Jakarta EE

Spring Boot 3.0废弃了JavaEE&#xff0c;改用了Jakarta EE 历史背景 javax变成Jakarta的主要原因是因为Java EE项目从Oracle转移到了Eclipse Foundation&#xff0c;并改名为Jakarta EE。 JavaEE是从Java 1.2版本开始推出的Java企业级开发平台&#xff0c;最初的名称是J2EE(J…
阅读更多...
电脑的ip地址怎么换掉：全面指南

电脑的ip地址怎么换掉：全面指南

在数字化时代&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。而IP地址&#xff0c;作为电脑在网络世界中的唯一身份标识&#xff0c;其重要性不言而喻。有时&#xff0c;出于安全、隐私或访问特定资源的需要&#xff0c;我们可能需要更换电脑的IP地址。本文将详…
阅读更多...
React表单联动

React表单联动

Ant Design 1、dependencies Form.Item 可以通过 dependencies 属性&#xff0c;设置关联字段。当关联字段的值发生变化时&#xff0c;会触发校验与更新。 一种常见的场景&#xff1a;注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段&#x…
阅读更多...
簡單易懂：如何在Windows系統中修改IP地址？

簡單易懂：如何在Windows系統中修改IP地址？

無論是為了連接到一個新的網路&#xff0c;還是為了解決網路連接問題&#xff0c;修改IP地址都是一個常見的操作。本文將詳細介紹如何在Windows系統中修改IP地址&#xff0c;包括靜態IP地址的設置和動態IP地址的獲取。 IP地址是什麼&#xff1f; IP地址是互聯網協議地址的簡稱…
阅读更多...
【 模型】 开源图像模型Stable Diffusion入门手册

【 模型】 开源图像模型Stable Diffusion入门手册

开源图像模型Stable Diffusion入门手册 引言硬件要求环境部署手动部署整合包 模型装配更新显存优化插件配置文生图最简流程提示词使用技巧结语 引言 Stable Diffusion是一款在2022年发布的深度学习文字到图像生成模型。它能够根据文字描述生成详细的图像&#xff0c;并且在几秒…
阅读更多...
ddddocr：强大的开源OCR库（2.0版本）

ddddocr：强大的开源OCR库（2.0版本）

ddddocr&#xff1a;强大的开源OCR库&#xff08;2.0版本&#xff09; ddddocr 是一款基于深度学习的开源 OCR&#xff08;光学字符识别&#xff09;库&#xff0c;旨在高效识别各种验证码。随着版本更新&#xff0c;ddddocr 的功能不断增强&#xff0c;特别是2.0版本在准确率…
阅读更多...
最新文章

Copyright @ 2022~2023