画像が移動するアニメーション

１．概要

「マーキー」を使用しての方法は下記のページで紹介しています
■　マーキーで画像を反転・移動
ここでは同じことを Javascript を用いて作成しました
現在、アニメーションは最下段にて移動・反転を実行しています
アニメーションにマウスを載せてみてください。停止し離すとそこから反転します
反転画像の作り方等、詳しくは上記のページをご覧ください

２．Javascript のソース

ソースのダウンロード　
実行はダウンロードしたファイルを読み込んで <BODY>と</BODY>の任意の場所に下記のように記述します

</HEAD>
<BODY>
<SCRIPT type="text/javascript" src="animation.js"></SCRIPT>
<SCRIPT type="text/javascript">

</SCRIPT>
</BODY>

現在はウインドウ画面の最下端にアニメーションを表示しています
任意の縦方向の位置に表示する場合は = 100 のように設定します

//-- 共通の変数初期設定
var anime_left = anime_getINNERWIDTH() 　;//-- ウィンドウの幅
var anime_y_pos = anime_getINNERHEIGHT() ;//-- 表示位置が最下端の場合
;//-- 任意の位置の場合は var anime_y_pos = 100 ように設定する

現在アニメーションにマウスを載せると一旦停止し、離すと逆方向に移動します。
これは下記の部分で動作させています
単純に停止だけの場合はタイマーだけを残して削除します

//-- アニメ再開　停止と反転　
function anime_go(){

//---------- ここから ---------
if(anime_bx < 0){
　　document.anime_gif.src = anime_img_pass + anime_file[anime_num] + "_l.gif"
　　anime_bx = anime_sp[anime_num]
}else{
　　document.anime_gif.src = anime_img_pass + anime_file[anime_num] + "_r.gif"
　　anime_bx = -1*anime_sp[anime_num]
}
//-------- ここまでを削除 ------------

anime_timer = setTimeout("anime_move()" , 50);
}

2011/10/03　