楕円を描いて移動画像をさせる 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)
// *************************** 入力事項ここまで **************************

更新履歴
・ 05/01/18 ver 1.00 Internet Explorer 6 および Netscape 7 に対応。スクロール対応他。
・ 03/06/04 ver 0.20 重心画像の非表示選択を可能にする他
・ 03/02/05 ver 0.10 表示の更新
・ 02/12/08 ver 0.00 初 公 開

使用画像
・ 画像は、Engel Heart さんから借りました。

ソースファイル
・下記の部分をコピーアンドペーストして使って下さい。 (<body>〜</body>の間に置く)
・ここのプログラムをコピーして下さい。(使用例ではバージョンが古いかも?)
<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>