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

这篇具有很好参考价值的文章主要介绍了点击图片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>