10
09/2014
html5 Full-Screen
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(); } } } }