Since 2000.11.18

JavaScript 追いかけカーソル



●動作解析のヒント●
 動作は大きく3つに分かれます。まず、マウスイベントを捕らえる部分。現在のマウスカーソルの位置をブラウザから取りこむ動きをしています。次にスタイルシートのレイヤー上に画像を表示し、時間経過に合わせて表示内容を差し換える部分。最後に、差し換えた画像をレイヤー上で移動させる部分です。

 本スクリプトでは、2番目の表示内容を時間経過に従って差し換える部分が最も入り組んだ、言い換えればプログラムらしい部分となっていますので、皆さん是非解析してみてください。

 まだバグが潜んでいるらしく、時々固まってしまうのはご愛嬌ということでお許し願います。原因がわかった方、そっと教えていただけましたら……

 なお、対応するブラウザはマイクロソフト・インターネット・エクスプローラのみです。


●コンテンツのパーツに●
 画像と動作エンジンをまとめてLZHパックにしてみました。著作権などという野暮なことはもうしません。コンテンツのパーツとして、どうぞご自由に改良、ご利用下さい。

 利用方法は、スクリプト<SCRIPT LANGUAGE="JavaScript1.2">から</SCRIPT>までを<HEAD>と</HEAD>の間に挟んで<BODY>タグの末尾に onLoad="anima_start();"と記入するだけです。

 画像ディレクトリ構成は次の設定にしていますが、スクリプトを書き換えることにより、どこにでも放り込んでいただけます。
oikakecu/********.htm
   |
   +------/image/****.gif

cell[fig_data[index]].src = './image/'+ fig_name[index] +'.gif';
                             ^^^^^^^^この部分を書き換える

例えば、同じディレクトリ内に全てまとめると、

cell[fig_data[index]].src = './'+ fig_name[index] +'.gif';
                             ^^
●ダウンロード●
 LZH圧縮ファイル[oikakecu.lzh]10kBをダウンロードします



  
GO TOP 落語目次 落語散歩