2010年3月6日土曜日

簡単なマウスストーカーの実装

流行遅れな感じがしますが、Webページ上で画像が追従するマウスストーカーのサンプルをつくりました。 出来るだけ分かりやすいようにシンプルなプログラムとコメントを心がけました。

説明
  • 5行目
    本コード唯一のグローバル変数です。カーソルに追従するDIV要素保存用
  • 12行目
    IMG要素の新規宣言
  • 15行目
    画像の読み込みが終わったら呼ばれる関数を指定する。
  • 18行目
    IMG要素へ読み込む画像ファイルを指定する。
  • 23行目
    画像の読み込みが終了したら呼ばれる関数を定義
  • 26,27行目
    読み込まれた画像のサイズを取得します。
  • 30行目
    DIV要素の新規宣言
  • 33,34,35行目
    DIV要素へスタイルを定義 自由に動かすためAbsolute属性、サイズを指定する。(スタイルでサイズを指定する場合は数字の後にpxを付加します。
  • 38行目
    BODY要素のオブジェクトを取得します。
  • 41行目
    DIV要素へIMG要素を追加します。
  • 44行目
    BODY要素へDIV要素を追加します。
  • 46行目
    マウスが動いたときに呼ばれる関数を設定します。
  • 56行目
    マウスが動いたときの関数を定義する。
  • 62行目
    IEとその他ブラウザの判別ようプログラム(理解しなくてもOKです)
  • 63~70行目
    マウスの座標を取得する(とりあえず理解しなくもOKです)
  • 73,74行目
    マウスカーソルとストーカーのずらし量を設定します。
  • 77,78行目
    DIV要素のスタイル要素へ新しい座標を設定します。
詳しくはサンプルをダウンロードして動かしてみてください。

0 件のコメント:

コメントを投稿