- ベストアンサー
1.gifをホームページ上でランダムに移動（ウロチョロ）させて、マウス
1.gifをホームページ上でランダムに移動（ウロチョロ）させて、マウスを1.gifに被せたら2.gif画像に変わり上の画面外に移動（逃げていく感じです）して、その後（１秒後位に）3.gifが上から画面中央まで出てくるという事をしたいのですが、どのようにJavascriptを記載すればよろしいでしょうか？ わかる方おられましたら、ご教授お願い致します。
- yasukichikun
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数9
- みんなの回答 （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"> </div> </body> </html> ぼそっと… イベントが残っているので、mode5の時にマウスでつつくとお手玉ができる
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
いままでにないくらいの、ださくだな・・・ ぜんかくくうはくは、はんかくに。 がめんの、はばとかたかさとか、すくろーるいちのしゅとくとかは、しらべてちょ。 とうこうもじすうせいげんがなければ、がっつりかけたかも！・・・ざんねんだなぁ～。^^; <!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>
お礼
とても詳しく教えて頂き、有難う御座います！ 本当に助かりました！ 皆様をベストアンサーにしたいです。 本当に本当にありがとうございました！
- yyr446
- ベストアンサー率65% (870/1330)
あなたが、自分で作りたい旨の質問なら、 Javascriptの記載の前に、機能の概要設計みたいなのを最初にやりましょう。 必用な機能と、その関係をまとめて整理してみましょう。 次に機能を実現させる仕様（条件）をはっきりさせましょう。 それから、javascriptでどう書けばよいか調べます。 その段階まで来てれば、それぞれのやり方は、簡単にサンプルが見つかる はずです。 すぐに完成物が欲しいだけなら、暫くここで放置しとけば、誰かが書いてくれるかも！
お礼
ご教授ありがとうございました！
お礼
今回初めて教えてgooを使わせていただきましたが、こんなに丁寧に教えてくださる方がたくさん居られて本当に感動しました！ これから教えていただいたジャバスクリプトを使い試してみようと思います！ 本当にありがとうございました！！