画像を徐々に大きくする

今回は魚がhitしたときのhitのエフェクト表示に使えそうなサンプルを見つけてきました。 クリックというところを押してみてください。hitという画像が徐々に表示されて きたと思います。

画像をtable内に配置する

まず、徐々に拡大させる画像をtable内に配置します。このとき、画像を配置するセルのサイズ を（画像サイズ+余白）で指定し、画像をセルの中央に配置するようにします。この理由は画像のサイズ を拡大してもページ全体のレイアウトが変化しないようにするためです。

画像を拡大する関数を呼び出す

画像を拡大する関数zoom()関数を呼びだします。ここではinputタグのtype属性buttonを使い ボタンがクリックされたときに拡大表示されるようにします。inputタグの中にonClick=zoom()をいれます。

zoom()関数を作る

ソースをみてください。javascript内では、初めに画像の最大の大きさを変数「max」で指定しておきます ここでの処理は大きく分けて２つに分かれます。(1)画像の横幅がmaxに達していない場合(2)画像の横幅がmax以上 の場合です。
(1)の場合、現在の幅、高さを「w」「h」に入れ、それぞれの値を画像の縦横比に応じて少しずつ増加させていきます。 今回の場合は横3、縦2なのでそれぞれを「+3」「+2」ずつ増加し、それをww、hhに新しい画像サイズとしています。
一方(2)の場合は、すでに画像の拡大が終了しているので最終的な画像サイズで表示するように指定します。 最後にsetTimeoutでzoom()関数を繰り返し実行させればできあがりです。

12月13日　宮本　勇