skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

マウスホイールで画像を拡大／縮小できるJavaScript「Animated Panel」

｜ ｜ ｜ ｜ ｜ ｜ ｜

マウスホイールが主流となってきつつある昨今、画像だってマウスホイールで拡大／縮小したい。
そんな欲求が出てくるのも時勢かもしれません。
Animated PanelはJavaScriptライブラリのmootoolsを利用して、実現しました。

使用方法
Animated Panelからanipan.jsをmootoolsからmootools.js、とmoreでsliderをダウロードします。
<script src="mootools-1.2.1-core.js" type="text/javascript"></script>
<script src="mootools-1.2-slide.js" type="text/javascript"></script>
<script src="anipan.js" type="text/javascript"></script>
<script type="text/javascript">
var myAniPanPage = {
start: function() {
var mf = new AnimatedPanel($('AnimatedPanel'), {});
}
};
window.addEvent('domready', function() {
myAniPanPage.start();
});
</script>

上記を記述したら、以下のように画像部分を書きます。
<div id="AnimatedPanel" style="width:600px;height:400px">
<!-- 画像1枚目ここから -->
<a href="#">
<img src="/test/img/skuarenet.jpg" />
</a>
<!-- 画像1枚目ここまで -->
<!-- 以下画像分 -->
</div>

マウスホイールで画像を拡大／縮小できるJavaScript「Animated Panel」サンプル

記事作成：2009年04月09日

前の記事：jQueryでRSSの登録をユーザーに促すJavaScript「jQuery Feed Menus」
次の記事：jQueryでメニューを固定位置に追随させる：Live floating menu