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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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