まだデータがありません。
背景画像を全画面表示「ResponsiveTopScreen」
当ページのリンクには広告が含まれています。
スポンサーリンク
背景画像を全画面表示するプラグイン「ResponsiveTopScreen」を紹介します。
jQueryプラグイン「ResponsiveTopScreen」
このプラグインを使えば、指定した背景画像を全画面（フルスクリーン）表示することができます。
レスポンシブ対応なので、Webサイトのトップページなんかにいいかもしれませんね。
スポンサーリンク
それではデモページのフルスクリーン画像をご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ResponsiveTopScreen のデモでーす。">
<title>ResponsiveTopScreen - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.responsiveTopScreen.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 5%;
right: 5%;
color: #fff;
}
</style>
</head>
<body>
<section id="demo">
<img src="sakura.png" data-original-width="600" data-original-height="389" />
<h1>ResponsiveTopScreen のデモでーす。</h1>
</section>
<h2>元の画像</h2>
<img src="sakura.png" />
<script>
$(function(){
$("#demo").responsiveTopScreen();
});
</script>
</body>
</html>
スポンサーリンク