[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Post on:2010年6月14日
ドラッグ操作を利用したインターフェイスを簡単に実装できるスクリプトを紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010061404.png)
スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。
以下に公開されているデモを紹介します。
シンプルなスライダー
![デモのキャプチャ](/wp-content/uploads-2010/2010061404-01.png)
オプション無しで動作するシンプルなスライダー。
赤いパネルがグレーの枠内でのみドラッグで移動できます。
スクロールバー
![デモのキャプチャ](/wp-content/uploads-2010/2010061404-02.png)
ドラッグ操作で動作するオリジナルのスクロールバー。
赤いパネルをドラッグで移動すると、それに伴いコンテンツもスクロールします。
テキストの拡大
![デモのキャプチャ](/wp-content/uploads-2010/2010061404-03.png)
テキストを拡大表示する拡大鏡。
赤いパネルをドラッグすると決められた位置に停止し、テキストが拡大します。こういったコントロールするという操作はこのスクリプトが最も得意とするものです。
コントロール機能をもったスライドショー
![デモのキャプチャ](/wp-content/uploads-2010/2010061404-04.png)
画像とテキストの両方で操作が可能なスライドショー。
左の画像をドラッグすると、それに伴いテキスト側の枠も移動します。テキスト側でもスライドショーの操作は可能です。
マスクを利用したコンテンツ
![デモのキャプチャ](/wp-content/uploads-2010/2010061404-05.png)
上記のスライドショーを進化させたもの。
決められた範囲のみに表示し、範囲外にドラッグするとバウンスのアニメーションで戻ります。
sponsors