10 09/2014

html5 Full-Screen

最后更新: Wed Sep 10 2014 12:37:50 GMT+0800

http://www.sitepoint.com/understanding-masonry-layout/

css 可以这样玩

figure:-moz-full-screen img {
    position: fixed;
}

figure:-ms-fullscreen {
    width: auto;
}

figure:-ms-fullscreen img {
    position: fixed;
}

figure:fullscreen img {
    position: fixed;
}

js 这样

if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {

    // image container
    var i = document.getElementById("myimage");

    // click event handler
    i.onclick = function() {

        // in full-screen?
        if (
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        ) {

            // exit full-screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        }
        else {

            // go full-screen
            if (i.requestFullscreen) {
                this.requestFullscreen();
            } else if (i.webkitRequestFullscreen) {
                i.webkitRequestFullscreen();
            } else if (i.mozRequestFullScreen) {
                i.mozRequestFullScreen();
            } else if (i.msRequestFullscreen) {
                i.msRequestFullscreen();
            }

        }

    }

}

原文 例子