Zoom In
このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。
ズームインを行なうためのDynamicHTML(DOM+JavaScript)です。タイルシートと組み合わせて使います。スタイルシートであらかじめ文字サイズを小さくしておき、指定したサイズまで徐々に拡大します。スクリプトはscriptフォルダにあるものとして記述しています。
Sample
クリックでもう一度Zoom In !!!!
<DIV id="zin" style="font-size:1px;">Zoom In !!!!</DIV>
ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。
<SCRIPT type="text/javascript" src="script/zoomin.js"></SCRIPT>
ここからスクリプトをファイルに保存して、上のように<HEAD>～</HEAD>内に記述してスクリプトを読み込ませます。
<BODY onload="zoomIn('zin',80,20);">
スクリプトは<BODY>のonload属性で実行します。最初のパラメータがターゲットとなるIDで、2番目のパラメータが最終サイズ、3番目のパラメータが処理間隔です。