【マウスホイールで画像を様々な角度で回転させるjQuery】商品プレビューなんかに使えそうですかね

Web全般

jQueryでマウスを持っていってホイールを動かしたりドラッグで操作360度回転するプラグインがあります。

ソースコード

<!DOCTYPE html>
<html>
 <head>
  <script src='http://code.jquery.com/jquery-latest.min.js'></script>
  <script src='jquery.reel-min.js'></script>
  <script src='inc/jquery.disabletextselect-min.js'></script>
  <script src='inc/jquery.mousewheel-min.js'></script>
 </head>
 <body>
  <img id='image' src='object.jpg' width='276' height='126' />
  <script>
   $(document).ready(function(){
    $('#image').reel({
     frames: 35,
     saves: true
    });
  });
  </script>
 </body>
</html>

「frames」の数値の変化で、回転を調節できます。

設置前には、あらかじめ2枚の画像を用意しておく

この回転スクリプトには、2枚の画像を使用しています。

読み込み時に表示する初期画像

で、下が回転に使う画像ですね。

360度回転用の画像

左上からスタートして、右下の画像で1回転としていますね。合計35枚ですね。この35枚の画像を1枚に集約した画像を用意します。

また、先ほど「frame」の値について触れましたが、つまりこの画像の枚数と「frame」の値を合わせているということですね。

枚数も別に35枚でも100枚でも何枚でもいいです。ただし、ちゃんとスクリプトの「frame」の値と合わせることが重要ですね。

まとめ

車のメーカーサイトとかでこういうのFlashで実現してることありますけど、Flashを使わなくてもできる方法ですね。

動作も軽めだし、それなりに使えるんじゃないかと思います。ちなみに、スクリプト配布元はこちらです。

配布元では、X軸（横）とY軸（縦）両方動かせるスクリプトも紹介されていますので、ご参考ください。

知っておくだけでも損はないと思います。

著者:bouya Imamura