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

解決済

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

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

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

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の時にマウスでつつくとお手玉ができる

- 0
- 件

通報する

この回答へのお礼

今回初めて教えてgooを使わせていただきましたが、こんなに丁寧に教えてくださる方がたくさん居られて本当に感動しました！
これから教えていただいたジャバスクリプトを使い試してみようと思います！
本当にありがとうございました！！

通報する

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

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.1

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

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

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

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