• ベストアンサー

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

  • 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

    今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"'　border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ランダム表示の画像位置

    初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー7ライトを使い、 画像をランダムで変えたいと思って 調べてやってみたところ、以下の JavaScriptで一応は出来たんです。 <script language="JavaScript"> <!-- img = new Array img[0] = "gif/1.gif"; img[1] = "gif/2.gif"; img[2] = "gif/3.gif"; img[3] = "gif/4.gif"; img[4] = "gif/5.gif"; rnd = Math.floor(Math.random() * img.length); document.write("<img src='",img[rnd],"'>"); //--> </script> しかし、画像が一番左上に出てしまいます。 これを位置調整しようと思ったらどんな JavaScriptを使えばよろしいでしょうか？ 本当に申し訳ありませんが、回答の方を どうかよろしくお願い致します。

  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • javascriptを使って画像のランダム表示とロールオーバーをセット

    javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

  • Windows8.1でマウスが勝手に移動する

    SONY Duo13 Windows8.1でマウスが勝手に移動する現象が発生します。 原因が今一つ確定しないのですが、どうやらタブレットモードで利用すると正常になり キーボードを出して利用すると発生する。 画面中央の下側で高速に反応しているような感じ?! もしかするとVAIOの構造上の設定でタブレットと内臓キーボード利用時に何らかの 設定が働きマウス機能を有効にしているから?! マウスはブルートゥースでもUSBでもタッチでも結果は同じで、2秒ほどで画面中央の下側に 自動的に移動してしまう?! どなたか同一現象で解決策をお持ちの方は教えていただけると幸いです。

  • Photoshopのレイヤー画面にGIF画像を移動できません。

    Photoshopのレイヤー画面に移動ツールを使ってGIF画像を移動させようとしても、移動できません。同じレイヤー画面に別のJPG画像なら移動できるのですが、GIF画像は移動できないのでしょうか。

  • マウスポインタが勝手に移動

    光学式のマウスを使っているのですが、マウスポインタが勝手に何もせずに移動するときがあるのです（結構頻繁です）移動するのは決まって画面の右上の隅や、左上の隅や、左下のスタートボタンの上に移動するのです。画面の中央にマウスポインタがあっても一瞬のうちに移動してしまいます。コントロールパネルの中のマウスの項目を見ても変更できるそれらしいものがなくどこで設定をかえればいいのか分からず困っています。それとも、マウス自体が悪いのでしょうか。勝手に動く時以外は正常に動くので壊れてるとは考えにくいのですが・・・ご回答よろしくお願いいたします。

  • リンクをランダムに変えたい

    画像ランダムスクリプトと同じような感じでリンクをランダムに変えることは可能でしょうか？ つまりリンク先をいくつか用意しておいた上でページを表示するたびにテキスト上のリンク先を変化させたいのです。 ご教授よろしくお願い致します。

  • ホームページ製作について、オペラ座hpトップのように画像がマウスをある

    ホームページ製作について、オペラ座hpトップのように画像がマウスをある位置に移動すると、並んだ画像が右側にスライドし、中央の画像が大きく表示されるようにしたいです。データコードをみるとjavascriptのようですが、 どなたかHTML文書入力について、具体的に教えていただけないでしょうか？ http://www.operadeparis.fr/cns11/live/onp/Saison_2009_2010/index.php?lang=en

  • Javascriptでランダムに画像を表示させ、さらにリンクさせる

    当方、ホームページを作成していまして、 画像をランダムに表示させることはできたのですが、 さらにその画像をクリックにて違うページにリンクさせたいと考えております。 いろいろ検索してみたのですが、明確な回答が見つからなかったもので、、、 どなたかご回答いただけると、大変助かります。 どうぞよろしくお願いいたします。 現時点で、以下の様になっています。 （4枚の画像をランダム表示させ、リンク先は同じ場所を考えています） <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="0.gif"; ranimg[1]="1.gif"; ranimg[2]="2.gif"; ranimg[3]="3.gif"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する