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();
}
}
}
}