[JS]画像の商品をドラッグとホイールで360度回転させるスクリプト -Reel

img要素で配置した画像をマウスのドラッグとホイール操作で、商品や風景をぐるっと360度回転させるスクリプトをPetr Vostřelから紹介します。

デモのキャプチャ

Reel
デモ

画像の回転はドラッグとホイールに合わせて、左右どちらでも回転が可能です。

スクリプトのイメージ

画像はimg要素で配置されており、二枚の画像を使用します。

一枚目は、スタティックに配置されているデフォルトの画像です。

画像のキャプチャ

デフォルトの画像

二枚目は、回転に必要な画像です。
車がぐるっと回転するのには、下記のような画像を作成します。

画像のキャプチャ

回転に必要な画像(キャプチャは縮小)

パノラマにも対応しており、下記のような画像を用意すると設置できます。

画像のキャプチャ

パノラマ用の画像(キャプチャは縮小)

ReelはjQueryのプラグインのため、実装にはjquery.jsが必要です。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

top of page

©2011 coliss