当前位置： 首页 > article >正文

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

article 2024/11/24 16:52:28

效果图：

 

<!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.kler.cn/a/407427.html

相关文章：

  • 【Android】Service使用方法：本地服务 / 可通信服务 / 前台服务 / 远程服务（AIDL）
  • 【虚拟机】VMWare的CentOS虚拟机断电或强制关机出现问题
  • python特殊字符序列
  • Vue3+SpringBoot3+Sa-Token+Redis+mysql8通用权限系统
  • 在CentOS 7上配置Nginx的TCP端口转发
  • 探索 RocketMQ：企业级消息中间件的选择与应用
  • 虚拟机苹果OS当中XCode安装后如何增加对ios的支持
  • LLM的原理理解1-5：1、词向量2、词的意义取决于上下文3、将词向量转化为词预测4、​注意力机制​
  • 谈谈Mysql的常见基础问题
  • CSS —— 子绝父相
  • 2023年3月GESPC++一级真题解析
  • PHP实现冒泡排序
  • 第四课 Animation动画资源导入设置检查与优化
  • Flink转换算子——flatMap/map/filter/keyby/reduce综合练习
  • Spring Boot 动态数据源切换
  • apache、iis规则屏蔽拦截ClaudeBot等蜘蛛爬虫抓取网页
  • 营销的本质
  • 3、集线器、交换机、路由器、ip的关系。
  • 传奇996_36——背包图标，物品位置问题
  • Hive分区的种类 分区关联数据的三种方式
  • Pinia 实战教程：构建高效的 Vue 3 状态管理系统
  • 鸿蒙学习笔记：ArkUI概述
  • 从搭建uni-app+vue3工程开始
  • 现代密码学
  • 【Linux庖丁解牛】—软件安装vim！
  • Spring Boot 入门指南：从零开始搭建你的第一个应用