JS局部可放大相册代码(jQuery上下自动切换图片相册)

资讯实事
2024-10-11 19:45:02

以下是一个使用JavaScript实现的局部可放大相册的示例代码：

<!DOCTYPE html><html><head>
    <title>JS局部可放大相册</title>
    <style>
        .gallery {            display: flex;            flex-wrap: wrap;            justify-content: center;
        }        .gallery img {            width: 200px;            height: 200px;            object-fit: cover;            margin: 10px;            cursor: pointer;
        }        .modal {            display: none;            position: fixed;            top: 0;            left: 0;            right: 0;            bottom: 0;            background-color: rgba(0, 0, 0, 0.8);            z-index: 999;            justify-content: center;            align-items: center;
        }        .modal img {            max-width: 80%;            max-height: 80%;
        }    </style></head><body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1" onclick="openModal(this.src)">
        <img src="image2.jpg" alt="Image 2" onclick="openModal(this.src)">
        <img src="image3.jpg" alt="Image 3" onclick="openModal(this.src)">
    </div>

    <div class="modal" onclick="closeModal()">
        <img id="modalImage" src="" alt="Modal Image">
    </div>

    <script>
        function openModal(src) {            var modal = document.querySelector('.modal');            var modalImage = document.getElementById('modalImage');
            modalImage.src = src;
            modal.style.display = 'flex';
        }        function closeModal() {            var modal = document.querySelector('.modal');
            modal.style.display = 'none';
        }    </script></body></html>

在上面的示例代码中，我们创建了一个相册（.gallery），其中包含了多个图片（<img>）。每张图片都具有点击事件（onclick），点击图片时会调用openModal()函数来打开一个模态框（.modal），并将被点击图片的URL传递给模态框的图片（<img>）。

在JavaScript代码中，openModal()函数接收一个参数（图片URL），并将该URL设置为模态框图片的src属性。然后，将模态框的样式设置为display: flex;，以显示模态框。

closeModal()函数用于关闭模态框，将模态框的样式设置为display: none;，以隐藏模态框。

示例代码中的图片URL（src）应替换为您自己的图片URL。

javascript特效相册代码局部放大特效脚本代码 jquery特效 jquery下载
jQuery上下自动切换图片相册，jQuery带标题左右移动图片相册，jquery顶/支持/投票按钮，jquery图文内容自动播放，

JS局部可放大相册代码(jQuery上下自动切换图片相册)由讯客互联资讯实事栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JS局部可放大相册代码(jQuery上下自动切换图片相册)”