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

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

sponsors

使用方法

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>

サンプル

Test1 Test1 Test1 Test1 Test1 Test1 Test1 Test1

sponsors

Javascriptサンプルページ一覧
skuare.net