点击图片1.全屏阅览2.下载3.关闭纯纯html css js

要实现图片点击全屏预览的功能，可以使用JavaScript和CSS来实现。以下是一个简单的示例代码：

html

<!DOCTYPE html>
<html>
<head>
    <meta charsett="UTF-8">
    <title>图片点击全屏预览</title>
    <style>
        /* 全屏预览样式 */
        .fullscreen {
    
    
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .fullscreen img {
    
    
            max-width: 90%;
            max-height: 90%;
        }

        .fullscreen img:hover {
    
    
            cursor: pointer;
        }

        /* 关闭按钮样式 */
        .close-btn {
    
    
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

        /* 下载按钮样式 */
        .download-btn {
    
    
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="image.jpg" alt="图片" onclick="openFullscreen(this)">
    
    <script>
        function openFullscreen(img) {
    
    
            // 创建全屏预览容器
            var fullscreenDiv = document.createElement("div");
            fullscreenDiv.classList.add("fullscreen");

            // 创建关闭按钮
            var closeBtn = document.createElement("span");
            closeBtn.classList.add("close-btn");
            closeBtn.innerHTML = "&times;";
            closeBtn.onclick = function() {
    
    
                closeFullscreen();
            };
            fullscreenDiv.appendChild(closeBtn);

            // 创建下载按钮
            var downloadBtn = document.createElement("span");
            downloadBtn.classList.add("download-btn");
            downloadBtn.innerHTML = "&#x2193;";
            downloadBtn.onclick = function() {
    
    
                downloadImage(img.src);
            };
            fullscreenDiv.appendChild(downloadBtn);

            // 创建图片元素
            var fullscreenImg = document.createElement("img");
            fullscreenImg.src = img.src;
            fullscreenDiv.appendChild(fullscreenImg);

            // 添加全屏预览容器到页面
            document.body.appendChild(fullscreenDiv);

            // 禁用滚动
            document.body.style.overflow = "hidden";
        }

        function closeFullscreen() {
    
    
            // 移除全屏预览容器
            var fullscreenDiv = document.querySelector(".fullscreen");
            fullscreenDiv.parentNode.removeChild(fullscreenDiv);

            // 启用滚动
            document.body.style.overflow = "auto";
        }

        function downloadImage(src) {
    
    
            // 创建一个隐藏的链接并设置下载属性
            var link = document.createElement("a");
            link.href = src;
            link.download = "image.jpg";
            link.style.display = "none";

            // 将链接添加到页面并模拟点击
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
</body>
</html>

在上面的代码中，我们首先定义了一个全屏预览的样式，并在点击图片时调用openFullscreen函数。该函数会创建一个全屏预览容器，并在容器中显示图片。同时，我们还创建了关闭按钮和下载按钮，分别用于关闭全屏预览和下载图片。

点击关闭按钮时，调用closeFullscreen函数，移除全屏预览容器，并启用滚动。

点击下载按钮时，调用downloadImage函数，创建一个隐藏的链接，并设置链接的下载属性，然后模拟点击链接实现图片下载。

请注意，这只是一个简单的示例，实际的图片全屏预览功能可能需要更多的优化和处理，例如支持多张图片预览、滑动切换等。根据具体需求，您可以根据上述示例进行扩展和修改。

点击图片1.全屏阅览2.下载3.关闭 纯纯html css js

猜你喜欢

点击图片1.全屏阅览2.下载3.关闭纯纯html css js