マウスホイールで画像を拡大／縮小できるJavaScript「Animated Panel」
[ 2分で読めて簡単導入できます]
マウスホイールが主流となってきつつある昨今、画像だってマウスホイールで拡大／縮小したい。
そんな欲求が出てくるのも時勢かもしれません。
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日
