画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」

jQueryで画像の特定部分を拡大させるプラグインは多々ありますが、今回紹介するax-zoomerはシンプルかつマウスホイール対応となかなか便利なものです。
画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」サンプル

使用方法
ax-zoomerからaxzoomer.jsをMouse Wheel Extensionからjquery.mousewheel.js、そしてjQueryからjquery.jsもダウンロードしましょう。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.mousewheel.js" type="text/javascript"></script>
<script src="axzoomer.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.class名').axzoomer({
'maxZoom':4, //ズームの段階
'zoomIn':'zoom-in.png', //ズームインさせるときの画像
'zoomOut':'zoom-out.png', //ズームアウト時の画像
'opacity':0.5, //ズーム系画像の透明度
'sensivity':10 //一回でズームする量
});
});
</script>

大きな画像と小さな画像を用意し、下記のように記述します。
<img src="小さい画像" src-big="大きい画像" class="class名" />

画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」サンプル

sponsors

「画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」」をシェアする

記事作成:
記事URL:

TOP > > > 画像の好きなとこを拡大させられるjQueryプラグイン「ax-zoomer」