1.gifをホームページ上でランダムに移動（ウロチョロ）させて、マウス

解決済

質問者：yasukichikun
質問日時：2010/09/08 21:55
回答数：3件

1.gifをホームページ上でランダムに移動（ウロチョロ）させて、マウスを1.gifに被せたら2.gif画像に変わり上の画面外に移動（逃げていく感じです）して、その後（１秒後位に）3.gifが上から画面中央まで出てくるという事をしたいのですが、どのようにJavascriptを記載すればよろしいでしょうか？
わかる方おられましたら、ご教授お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： yyr446
回答日時：2010/09/09 09:41

あなたが、自分で作りたい旨の質問なら、

Javascriptの記載の前に、機能の概要設計みたいなのを最初にやりましょう。
必用な機能と、その関係をまとめて整理してみましょう。
次に機能を実現させる仕様（条件）をはっきりさせましょう。
それから、javascriptでどう書けばよいか調べます。
その段階まで来てれば、それぞれのやり方は、簡単にサンプルが見つかる
はずです。

すぐに完成物が欲しいだけなら、暫くここで放置しとけば、誰かが書いてくれるかも！

- 0
- 件

通報する

この回答へのお礼

ご教授ありがとうございました！

通報する

お礼日時：2010/09/09 22:15

No.2

回答者： babu_baboo
回答日時：2010/09/09 18:05

いままでにないくらいの、ださくだな・・・

ぜんかくくうはくは、はんかくに。
がめんの、はばとかたかさとか、すくろーるいちのしゅとくとかは、しらべてちょ。
とうこうもじすうせいげんがなければ、がっつりかけたかも！・・・ざんねんだなぁ～。^^;
<!DOCTYPE html>
<title></title>
<body>
<div>
<img src="1.gif" width="16" height="16" alt="musi" id="musi" style="position:absolute;" onmouseover="mode=2;">
</div>
<script>
var mode = 1;
var mu = document.getElementById ('musi');
var px = 0, py = 0;
var rx = px, ry = py;
demo ();

function demo () {
　switch (mode) {
　case 1 :
　　if (Math.abs (rx - px) < 2 && Math.abs (ry - py) < 1) {
　　　rx = Math.random () * 500 |0;
　　　ry = Math.random () * 500 |0;
　　}
　　
　　px += (px < rx) - (rx < px);
　　py += (py < ry) - (ry < py);
　　
　　mu.style.top = py + 'px';
　　mu.style.left = px + 'px';
　　break;

　case 2 :
　　mu.src = '2.gif';
　　mode = 3;
　
　case 3 :
　　mu.style.top = (--py) + 'px';
　　if (py < -16) {
　　　mode = 4;
　　　setTimeout (arguments.callee, 2000);
　　　return;
　　}
　　break;

　case 4 :
　　px = 250;
　　mu.style.left = px + 'px';
　　mu.src = '3.gif';
　　mode = 5;
　　
　case 5 :
　　if (250 == (++py)) {
　　　mode = 6;
　　　return;
　　}
　　mu.style.top = py + 'px';
　　break;
　
　case 6 : default :
　　return;
　　break;
　}
　setTimeout (arguments.callee, 30);
};

</script>

- 0
- 件

通報する

この回答へのお礼

とても詳しく教えて頂き、有難う御座います！
本当に助かりました！
皆様をベストアンサーにしたいです。
本当に本当にありがとうございました！

通報する

お礼日時：2010/09/09 22:14

No.3ベストアンサー

回答者： fujillin
回答日時：2010/09/09 19:59

制限があるので、文字数無理にを詰めています。

・あくまでもサンプルなので、あ～だこ～だは無し
・画像は文字で代用してます

「ｈｔｔｐ」は「http」に変換のこと

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<script type="text/javascript" src="ｈｔｔｐ://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="target"></div>
</body>
</html>

ぼそっと…
　イベントが残っているので、mode5の時にマウスでつつくとお手玉ができる