[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout

サイト構築 -JavaScript

Post on:2012年3月15日

sponsorsr

リスト要素などのネストされたHTMLの要素をユーザーの操作でターンテーブルのようにぐるぐる回転させることができるjQueryのプラグインを紹介します。

Roundabout

[ad#ad-2]

Roundaboutのデモ
Roundaboutの使い方

Roundaboutのデモ

デモページ

デモではたくさんのぐるぐる回るのがあります。
その中からいくつか下記にご紹介。

デモ：Standard
スクリプトの動作が分かるスタンダードなデモ。

デモ：Images
ただのボックスを画像に置き換えたデモ。

[ad#ad-2]

デモ：Slideshow Facade
画像の切り替えを短冊状のアニメーションで行うスライドショー。

デモ：3D Effect
3D状に回転するデモ。

デモ：Around Other Things
回転の中心に他のエレメントを置いたデモ。

Roundaboutの使い方

Roundabouの実装方法を簡単に紹介します。
詳しい実装方法については「Learn」をご覧ください。

Roundabout -Learn

HTML

ぐるぐる回転させる各エレメントをリスト要素で実装します。

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script>

JavaScript

jQueryのセレクタで指定し、Roundaboutを実行します。

<script>
   $(document).ready(function() {
      $('ul').roundabout();
   });
</script>

CSS

スタイルシートはまずは、下記のものを使用してみてください。
もちろん、カスタマイズして利用しても構いません。

   .roundabout-holder {
      list-style: none;
      padding: 0;
      margin: 0;
      height: 5em;
      width: 5em;
   }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ccc;
      border: 1px solid #999;
   }
   .roundabout-in-focus {
      cursor: auto;
   }
</style>