实战案例——点击图片全屏显示

全屏图片点击切换效果实现

最新推荐文章于 2025-02-27 13:36:04 发布

转载最新推荐文章于 2025-02-27 13:36:04 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://demo.cssworld.cn/selector/12/2-1.php

文章标签：

#css #html #javascript

已归档链接同时被 2 个专栏收录

275 篇文章

订阅专栏

前端实战

19 篇文章

订阅专栏

这段代码展示了如何实现点击图片进入全屏查看，并支持退出全屏的功能。通过监听图片点击事件，调用浏览器的全屏API实现全屏切换。同时，使用了前缀检查方法确保在不同浏览器上的兼容性。

效果见 https://demo.cssworld.cn/selector/12/2-1.php

<h4>点击查看大图</h4>
<div id="img" class="cs-img-x">
    <img class="cs-img" src="/images/common/l/1.jpg">
</div>

:fullscreen .cs-img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

(function() {
    var runPrefixMethod = function(element, method) {
        var usablePrefixMethod;
        ["webkit", "moz", "ms", ""].forEach(function(prefix) {
            if (usablePrefixMethod) return;
            if (prefix === "") {
                // 无前缀，方法首字母小写
                method = method.slice(0,1).toLowerCase() + method.slice(1);  
            }
            
            var typePrefixMethod = typeof element[prefix + method];
            
            if (typePrefixMethod + "" !== "undefined") {
                if (typePrefixMethod === "function") {
                    usablePrefixMethod = element[prefix + method]();
                } else {
                    usablePrefixMethod = element[prefix + method];
                }
            }
        });
        
        return usablePrefixMethod;
    };
    
    if (typeof window.screenX === "number") {
        img.addEventListener("click", function() {
            if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
                runPrefixMethod(document, "CancelFullScreen");
            } else {
                runPrefixMethod(this, "RequestFullScreen")            
            }
        });
    }
})();