楕円を描いて移動画像をさせる JavaScript |
戻 る |
* 動きの基本は楕円運動で、万有引力の法則に従い軌道を描きます。 * 楕円運動する画像は、その軌跡を追って、複数個表示出来ます。 * 楕円の中心に、画像の表示の有無を選択出来ます。 * 数値の設定だけで、画像の指定や、動きの調整が出来ます。 * スクロールに対応しています。 * Internet Explorer 6 および Netscape 7 で動作確認しています。 (注意) 万有引力の法則に従う物理運動のため、直接に表示範囲は指定できません。 うまく移動させるのには、中心の位置と重さ、楕円画像の重さで調整してください。
「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。 ■ 「0」から順に表示したい楕円画像の重さを指定します。 ■ 次に表示したい楕円画像を、アドレスを含むファイル名で指定します。 ■ 楕円画像共通で、楕円画像の軌跡を連続して表示させる数を入力 ■ 楕円軌道の中心の重さを指定します。 ■ 楕円軌道の中心の、画面左端からの距離、画面上端からの距離をピクセル指定します。 ■ 楕円軌道の中心に画像を表示するかどうかを指定。 ( 表示 = 1 , 非表示 = -1 ) ■ 楕円軌道の中心の画像を、アドレスを含むファイル名で指定します。 ■ 画面をスクロールさせた時、画像も同時に移動させるか? ( yes = 1 , no = -1 ) ■ 動きの全体の速さを入力します。(大きいほど速いが、負担大) // ***************************** 入力事項 ****************************** // ======= 入力1:楕円画像の種類、連続表示個数と重さ(0から順に) // 1番目の数字で、楕円画像の重さ。大きいほど引力が大。(目安値 5) // 2番目の数字で、楕円画像の、画像ファイル名をアドレスと共に指定 ugoku[ 0 ]=new Array( 5, "../parts/samp1.gif"); ugoku[ 1 ]=new Array( 5, "../parts/samp2.gif"); // 以下に、楕円画像の軌跡を連続表示させる数を入力 var no= 3 ; // ======= 入力2:中心画像の種類と位置,および重さ // 1番目の数字で、中心画像の重さ。大きいほど引力が大。(目安値 30) // 2番目の数字で、中心画像の、画面左端からの距離 (ピクセル) // 3番目の数字で、中心画像の、画面上端からの距離 (ピクセル) // 4番目の数字で、中心画像の表示の可否 ( yes=1 , no=-1 ) // 5番目の数字で、中心画像の、画像ファイル名をアドレスと共に指定 taiyo=new Array( 30, 350,270, 1, "../parts/samp4.gif") // ======= 入力3:補助入力事項 var srl = 1 ; // 画像も同時にスクロールさせるか? ( yes=1 , no=-1 ) // 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする var chg = 10 ; // 一秒当たりの描画の切替え回数(目安値 10) // *************************** 入力事項ここまで **************************
<script type="text/javascript"> <!-- // mov_suisei ver1.00 (ぱーぷりんの溜まり場) ugoku=new Array(); // この行は触らないで・・ // ***************************** 入力事項 ****************************** // ======= 入力1:楕円画像の種類、連続表示個数と重さ(0から順に) // 1番目の数字で、楕円画像の重さ。大きいほど引力が大。(目安値 5) // 2番目の数字で、楕円画像の、画像ファイル名をアドレスと共に指定 ugoku[ 0 ]=new Array( 5, "../parts/samp1.gif"); ugoku[ 1 ]=new Array( 5, "../parts/samp2.gif"); // 以下に、楕円画像の軌跡を連続表示させる数を入力 var no= 3 ; // ======= 入力2:中心画像の種類と位置,および重さ // 1番目の数字で、中心画像の重さ。大きいほど引力が大。(目安値 30) // 2番目の数字で、中心画像の、画面左端からの距離 (ピクセル) // 3番目の数字で、中心画像の、画面上端からの距離 (ピクセル) // 4番目の数字で、中心画像の表示の可否 ( yes=1 , no=-1 ) // 5番目の数字で、中心画像の、画像ファイル名をアドレスと共に指定 taiyo=new Array( 30, 350,270, 1, "../parts/samp4.gif") // ======= 入力3:補助入力事項 var srl = 1 ; // 画像も同時にスクロールさせるか? ( yes=1 , no=-1 ) // 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする var chg = 10 ; // 一秒当たりの描画の切替え回数(目安値 10) // *************************** 入力事項ここまで ************************** // ----- 共通変数・配列の設定 ----- var doc_w, doc_h, img_wo, img_ho, G=1300000; xza=new Array(); yza=new Array(); Vx=new Array(); Vy=new Array(); img_w=new Array(); img_h=new Array(); // ----- 中心の表示 brSize();i=0; if(taiyo[3]>0){ document.write("<span id='ggg' style='position:absolute;'>" +"<img src='"+taiyo[4]+"' id='jusin'></span>"); img_wo=document.getElementById("jusin").width; img_ho=document.getElementById("jusin").height; Disp("ggg", taiyo[1]-img_ho/2+ off_w, taiyo[2]-img_wo/2+ off_h) } // ----- 楕円画像の大きさ co=ugoku.length; nn=0; for(j=0; j<co; j++){ document.write("<img src='"+ugoku[j][1]+"' id='suisei"+j+"' style='visibility:hidden;'>"); img_w[j]=document.getElementById("suisei"+j).width; img_h[j]=document.getElementById("suisei"+j).height } // ----- 楕円画像の初期表示 for(j=0; j<co; j++){ Vx[j]=10+Math.random()*35; // 初速の設定 if(Math.random()<0.5){ Vx[j]=-Vx[j] } Vy[j]=10+Math.random()*35; if(Math.random()<0.5){ Vy[j]=-Vy[j] } xza[j]=doc_w*2/5+Math.random(); //スタート範囲の設定 yza[j]=doc_h*2/5+Math.random(); for(i=0; i<no; i++){ document.write("<span style='position:absolute; z-index:60' id='dot"+nn+"'>" +"<img src='"+ugoku[j][1]+"'></span>"); Disp("dot"+nn, xza[j]-img_w[j]/2+off_w, yza[j]-img_h[j]/2+off_h); nn++ } } i=0; Zahyo(); // ----- 座標の計算 ----- function Zahyo(){ for(j=0; j<co; j++){ brSize(); Mr2=ugoku[j][0]*taiyo[0]/G*(Math.pow(taiyo[1]-xza[j],2)+Math.pow(taiyo[2]-yza[j],2)); kaku=Math.atan(Math.abs((taiyo[2]-yza[j])/(taiyo[1]-xza[j]))); if(xza[j]<taiyo[1]){ Vx[j]+=Mr2*Math.cos(kaku) } else{ Vx[j]-=Mr2*Math.cos(kaku) } if(yza[j]<taiyo[2]){ Vy[j]+=Mr2*Math.sin(kaku) } else{ Vy[j]-=Mr2*Math.sin(kaku) } xza[j]+=Vx[j]; yza[j]+=Vy[j]; nn=j*no+i; Disp("dot"+nn, xza[j]-img_w[j]/2+off_w, yza[j]-img_h[j]/2+off_h) if(taiyo[3]>0){ Disp("ggg", taiyo[1]-img_ho/2+ off_w, taiyo[2]-img_wo/2+ off_h) } } if(i<no-1){ i++ } else{ i=0 } setTimeout("Zahyo()",1000/chg) } // ----- ブラウザのサイズ ----- function brSize(){ if(document.all){ doc_w=document.body.clientWidth; doc_h=document.body.clientHeight; off_w=document.body.scrollLeft; off_h=document.body.scrollTop } else if(document.getElementById){ doc_w=window.innerWidth; doc_h=window.innerHeight; off_w=window.scrollX; off_h=window.scrollY } if(srl < 0){ off_w=0; off_h=0 } } // ----- 画像を移動させる ----- function Disp(num,xx,yy){ document.getElementById(num).style.left=xx; document.getElementById(num).style.top =yy } // --> </script>