可能會留意到這些網站服務都提供了高解析度的照片預覽模式,
同時這個預覽模式是使用「全螢幕」來展現的。
咦?什麼時候,網站程式碼可以直接執行全螢幕了呢?
什麼時候?就從有了 HTML5 以後,
我們的確可以用極少的 Code 來實現這個『全螢幕』顯示的效果了。
原來這個效果是屬於 HTML5 本身即包含的規格之一,
所以只要是支援這個標準的瀏覽器,
都可以透過呼叫這個 HTML5's FullScreen API 來執行。
原始碼如下:引用來源 Using HTML5's FullScreen API
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//list of images for the slideshow
var imageList = ["Image3.jpg", "Image4.jpg", "Image5.jpg"];
var count = 0;
//invoke this when user wants to see a Full Screen Slideshow
function enterFullScreen(){
var elem = document.getElementById("slideshow");
//show full screen
elem.webkitRequestFullScreen();
setTimeout(changePicture, 3000);
}
function changePicture(){
count++;
//cycle through the list of images
document.getElementById("image1").src = imageList[count % imageList.length];
if (document.webkitIsFullScreen)
setTimeout(changePicture, 3000);
else
//if user exits the full screen mode
document.getElementById("image1").src = imageList[0];
}
</script>
</head>
<body>
<div id="slideshow">
<img id="image1" src="Image3.jpg"><img>
</div>
<br>
<input type="button" value="Enter full screen mode" onclick=enterFullScreen()>
</body>
</html>
我們也有臉書專頁了,歡迎大家按讚加入喔: @5min.reading