[JS]表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更するスクリプト -JResponsive

サイト構築 -JavaScript

Post on:2013年3月13日

JResponsiveのデモ

デモはIE8+をはじめ、モダンブラウザでご覧ください。
表示サイズを変更すると、パネルのサイズやレイアウトがアニメーションで変更します。

まずは1200pxで表示。

デモページ：幅1200pxで表示

各パネルは3列で、大きいサイズで配置されています。

デモページ：幅860pxで表示

表示サイズを少し小さくすると、3列のままでサイズが小さく配置されます。

デモページ：幅768pxで表示

768pxで表示すると、サイズは大きいですが2列に。

デモページ：幅640pxで表示

640pxで表示すると、2列のままでサイズも小さくなります。

JResponsiveの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。
※レイアウト系なので、head内に配置。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jresponsive.js"></script>

Step 2: HTML

HTMLはdivなどでパネルを実装します。

<body>
<div id="example"></div>
</body>

Step 3: JavaScript

jQueryのセレクタで要素を指定し、レスポンス時のアニメーションや最小・最大幅、高さなどを設定します。

$("div").jresponsive({
  transormation: 'animation', 
  min_size: 100,
  max_size: 250,
  height:250,
  class_name: 'item',
  content_array: content
});