SQLの窓 イラストAC フリー素材

2014年08月07日

jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )






ちょっと気を許すと、というか前からあったんでしょうが、最近の最新技術情報はなんか意図的に道端凝視してないとえらい目にあいそうです。

※ スクロールできない
※ IEは IE11 からで、背景色用のスタイルが必要
IE 全画面 API
※ Google Chrome は、表示サイズを指定しないと崩れる場合があります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
body:-ms-fullscreen::-ms-backdrop {
	background-color: #ffffff;
}
</style>
<script type="text/javascript">

$(function(){

	// ボタン
	$("#button_control")
		.attr("type", "button")
		.val("フルスクリーン(Chrome or Firefox IE11)")
		.click(function(){

			if ( document.body.msRequestFullscreen ) {
				document.body.msRequestFullscreen();
			}
			else if (document.body.webkitRequestFullScreen) {
				$("body").css({
					"width": window.screen.width + "px",
					"height": window.screen.height + "px"
				});
				document.body.webkitRequestFullScreen();
			}
			else if (document.body.mozRequestFullScreen) {
				document.body.mozRequestFullScreen();
			}
		});

});

</script>

<input id="button_control"><br>
<img src="https://lh4.googleusercontent.com/-fRZlV-c6OiY/U9Mn1YqLK0I/AAAAAAAAVjk/MvWELOPssrs/s600/b17geoff_vane016.jpg" style="border: solid 0px #000000" />

関連する記事

Using the Fullscreen API in web browsers - Robert's talk



タグ:Javscript jquery
【jQueryの最新記事】
posted by at 2014-08-07 00:58 | jQuery | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX