画像の大きさをアニメーションで変える

音楽と環境問題スタートページの、左上タイトル画像と、右上 made on mac 画像に使っています。
タイトル画像にマウスを重ねると横ににょーんと１回伸びます。
made on mac 画像にマウスを重ねると２回バインバインします。
これらは同じ関数で動かしています。
<script language="javascript" type="text/javascript">
<!--
/****************************************
* 画像の大きさをアニメーションで変える *
****************************************/
// 多重起動防止 兼 処理中のオブジェクト
    var Lock = 0;
//引数（ID、配列型で倍率を格納、刻み時間、繰り返し数、縦にも伸ばすかの判別）
    function bain(imgID, wid, tim, rep, tate){
        if(Lock != 0)return;
        Lock = document.getElementById(imgID);
// 変化させる横幅の配列を作る
        var widthTable = new Array();
        for(var i=0; i<wid.length; i++) {
            widthTable[i] = parseInt(Lock.width * wid[i]);
        }
// 元の値も配列に加える
        widthTable.push(Lock.width);
// 繰り返す数だけ配列も繰り返すように
        while(rep-- > 1){
            widthTable = widthTable.concat(widthTable);
        }
// 縦幅の配列も作成
        var heightTable = new Array();
        if(tate){
            var hpw = Math.round( Lock.height / Lock.width * 100 ) / 100;
            for(var j=0; j<widthTable.length; j++) {
                heightTable[j] = parseInt(widthTable[j] * hpw);
            }
        }else{
            for(var j=0; j<widthTable.length; j++) {
                heightTable[j] = Lock.height;
            }
        }
// ID名、横幅の配列、縦幅の配列、刻み時間を引数としてbainSubをタイマー登録
        setTimeout( Function( 'bainSub("' + imgID + '",' + '[' + widthTable + '],' + '[' + heightTable + '],' + tim + ')' ), tim);
    }
    
    function bainSub(imgID,wid,hei,tim){
// 縦横幅を変更、配列の先頭要素は取り除く
        Lock.width = wid.shift();
        Lock.height = hei.shift();
// 配列の残りは…
        if(wid.length) {
// あるなら再度タイマー登録
            setTimeout( Function( 'bainSub("' + imgID + '",' + '[' + wid + '],' + '[' + hei + '],' + tim + ')' ), tim);
        } else {
// なければおわり
            Lock = 0;
        }
    }
//-->
</script>

使用例
使用法に関して詳細な説明が後述してあります。
下記の例で id が aa の画像は、マウスを重ねると横方向に３回伸び縮みします。
id が bb の画像は、マウスを重ねると少し縮んだあと急ピッチで拡大してゆっくり戻ります。（１回だけ）
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>テスト</title>
<script language="javascript" type="text/javascript">
<!--
　head内にソースを貼り付けます。
//-->
</script>
</head>
<body>
<img alt="○○"
     id="aa"
     src="○○.jpg"
     onMouseOver="bain('aa',[1.1, 1.2, 1.3, 1.2, 1.1],30,3,false);">
<img alt="○○"
     id="bb"
     src="○○.gif"
     width=100
     height=150
     onMouseOver="bain('bb',[0.9, 1.1, 1.3, 1.5, 1.4, 1.3, 1.2, 1.1],40,1,true);">
</body>
</html>

動かしたい画像には必ずIDを付けて下さい。

画像を動かしたいイベントで bain(〜,〜,〜,〜,〜) 関数を呼び出して下さい。
上記の例では、マウスオーバー（マウスが画像に重なった時）のイベント時に呼び出しています。
例えばクリック時にするなら onClick ="bain(〜,〜,〜,〜,〜)" に変えて下さい。

自由度を高めるため bain( ) にはたくさんの引数を付けています。
第１引数：　動かしたい画像IDです。IDで指定しているので、例えばどこかのボタンを押した時に○○の画像を動かす等も可能です。
　　IDはシングルクオート（アポストロフィー）で囲って下さい。
第２引数：　画像の倍率です。変化させたい順にカンマで区切って倍率を [　] 内に列挙して下さい。
　最後は自動的にもとの大きさ（1.0倍）に戻るので記述する必要はありません。
第３引数：　倍率が変化する際の待ち時間をミリ秒の単位で指定します。小さな数字にすると早く動きます。
第４引数：　繰り返し数です。
第５引数：　false で指定すると横だけに伸びます。true で指定すると縦にも同じ倍率で伸びます。
ご意見・ご指摘等ございましたらお願い致します。（雑記帳へ）
ホームページへ戻る