[JS]画像の商品をドラッグとホイールで360度回転させるスクリプト -Reel
Post on:2010年3月26日
img要素で配置した画像をマウスのドラッグとホイール操作で、商品や風景をぐるっと360度回転させるスクリプトをPetr Vostřelから紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010032604.png)
画像の回転はドラッグとホイールに合わせて、左右どちらでも回転が可能です。
![スクリプトのイメージ](/wp-content/uploads-2010/2010032605.png)
画像はimg要素で配置されており、二枚の画像を使用します。
一枚目は、スタティックに配置されているデフォルトの画像です。
![画像のキャプチャ](/wp-content/uploads-2010/2010032606.png)
二枚目は、回転に必要な画像です。
車がぐるっと回転するのには、下記のような画像を作成します。
![画像のキャプチャ](/wp-content/uploads-2010/2010032607.png)
回転に必要な画像(キャプチャは縮小)
パノラマにも対応しており、下記のような画像を用意すると設置できます。
![画像のキャプチャ](/wp-content/uploads-2010/2010032608.png)
パノラマ用の画像(キャプチャは縮小)
ReelはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors