マウスホイールで画像を拡大、ドラ
ッグ操作によるスクロールが可能な
jQueryのプラグイン、jQuery
Wheelzoomのご紹介です。シンプルで
いいですね。IEは9からの対応だそう
なので利用シーンは若干限られそ
うですけど。
マウスホイール操作による画像のズームや、ズーム後にドラッグ操作でスクロールも可能にするスクリプトです。
jQuery Wheelzoom
マウスホイールで画像をズームします。それだけと言えばそれだけなんですけど、結構軽量なので一応覚えておくといいかも。
Sample
動作サンプルですー
ドラッグ操作も可能です。タッチイベントへの対応は・・・別途コードを用意しなきゃかな（確認してない
タッチイベントと合わせてスマフォ向けのECサイトなんかに導入したり、というのも良さそうだけどピンチイン/アウトにも対応しないとですかね、多分。
コード
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script><script src='jquery.wheelzoom.js' type='text/javascript'></script> |
本体とスクリプトを読み込み。
$('#foo').wheelzoom(); |
初期化。
<img id='foo' src='http://example.com/bar.jpg' width='500' height='350'> |
画像にセレクタと合わせてidやclassを振れば完了です。
ライセンスはMITとの事です。
