今日の人気記事

  1. 指定した要素を上下左右にスクロール「Marquee」
  2. 虫眼鏡のように画像の一部を拡大「Zoomple」
  3. テキストエリアの入力フォームをポップアップで大きく表示「Textarea full screen」
  4. テーブルにスクロールバーをつける「Scroll Table」
  5. 入力した文字数/最大文字数をカウント「BootStrap Maxlength」

背景画像を全画面表示「ResponsiveTopScreen」

スポンサーリンク

背景画像を全画面表示するプラグイン「ResponsiveTopScreen」を紹介します。

jQueryプラグイン「ResponsiveTopScreen」

このプラグインを使えば、指定した背景画像を全画面(フルスクリーン)表示することができます。

レスポンシブ対応なので、Webサイトのトップページなんかにいいかもしれませんね。

スポンサーリンク

それではデモページのフルスクリーン画像をご覧ください。

「ResponsiveTopScreen」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)