• ベストアンサー

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

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

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

制限があるので、文字数無理にを詰めています。 ・あくまでもサンプルなので、あ～だこ～だは無し ・画像は文字で代用してます 「ｈｔｔｐ」は「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"> <!-- var W={ cont:["IMAGE1","☆☆","IMAGE3"], maxI:100, dist:20, mode:0, x:0, y:Math.random()*$(window).height() |0, intvl:100, dir:Math.PI }; W.set=function(m){ var w=this; w.mode=m; w.elm.html(w.cont[w.mode]).css({ "position":"absolute", "left":w.x+"px", "top":w.y+"px", "backgroundColor":["#ff0","#f00","#0ff"][w.mode] }); } W.nPos=function(){ var tmp,flag=0,w=this,d=w.dist; w.x +=Math.cos(w.dir)*d |0; w.y +=Math.sin(w.dir)*d |0; if(w.mode) return; tmp=$(window).width()-w.elm.width(); if(w.x < 0) {flag=2,w.x=-w.x;} else if(w.x>tmp) {flag=2,w.x=2*tmp-w.x;} tmp = $(window).height() - w.elm.height(); if(w.y<0) {flag=1,w.y=-w.y;} else if (w.y>tmp) {flag=1, w.y=2*tmp-w.y;} if (flag) w.dir=-w.dir; if (flag==2) w.dir +=Math.PI; } W.cBack=function(){ var w=this; switch (w.mode) { case 0: w.dir +=(Math.random()*2-1)*Math.PI/8; w.intvl=(Math.random()+0.4)*w.maxI |0; w.move(); break; case 1: w.x=($(window).width()-w.elm.width())/2 |0; w.y=-w.elm.height(); w.set(2); w.dir=Math.PI/2; w.dist=($(window).height()-w.elm.height())/2 |0; w.intvl=2400; setTimeout(function(){W.move()},1000); break; case 2: default: w.elm=null; alert("End"); break; } } W.move=function(){ var w=this; w.nPos(); w.elm.animate({left:w.x,top:w.y},{duration:w.intvl,complete:function(){W.cBack();}}); } W.cFunc=function(){ var w=this; w.elm.unbind("mouseover").stop(); w.dist=$(window).height()+$(window).width(); w.set(1); w.intvl=500; w.move(); } $(function(){ W.elm=$("#target").mouseover(function(){W.cFunc();}); W.set(0); W.move(); }); //--> </script> </head> <body> <div id="target">&nbsp;</div> </body> </html> ぼそっと… 　イベントが残っているので、mode5の時にマウスでつつくとお手玉ができる

yasukichikun
質問者

お礼

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

すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.2

いままでにないくらいの、ださくだな・・・ ぜんかくくうはくは、はんかくに。 がめんの、はばとかたかさとか、すくろーるいちのしゅとくとかは、しらべてちょ。 とうこうもじすうせいげんがなければ、がっつりかけたかも！・・・ざんねんだなぁ～。^^; <!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>

yasukichikun
質問者

お礼

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

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

あなたが、自分で作りたい旨の質問なら、 Javascriptの記載の前に、機能の概要設計みたいなのを最初にやりましょう。 必用な機能と、その関係をまとめて整理してみましょう。 次に機能を実現させる仕様（条件）をはっきりさせましょう。 それから、javascriptでどう書けばよいか調べます。 その段階まで来てれば、それぞれのやり方は、簡単にサンプルが見つかる はずです。 すぐに完成物が欲しいだけなら、暫くここで放置しとけば、誰かが書いてくれるかも！

yasukichikun
質問者

お礼

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

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する