斜め方向に画像を往復させる JavaScript |
戻 る |
* 斜め直線移動で,水平垂直線から25度以上の角度で,サインカーブの揺れを伴い反復します。 * 表示範囲の端まで来ると反射し、ランダムに速さや揺れを変えます。 その都度速さや振れ幅等が変わります。 その時、画像の切り替えが出来ます。 また、全部描写と、一つの画像を残し画像の表示と非表示の交互描写の、選択が出来ます。 * 数値の設定だけで、画像の種類毎に、画像の指定や、動きの調整が出来ます。 * スクロールに対応・非対応を選択出来ます。 * Internet Explorer 6 および Netscape 7 で動作確認しています。
「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。 ■ その画像の表示範囲の、画面上端から、左端からの距離(px) を指定します。 ■ その画像の表示範囲の、幅、高さ(px) を指定します。 「0」を指定すると、幅は画面右端まで、高さは画面下端まで表示されます。 ■ 画像が進む 平均的な速さ を入力します。(大きいほど速い) ■ 画像の進む方向と直角に揺れる幅を入力します。(大きいほど揺れも大きい) 「0」を入れると、まっすぐ進みます。 揺れを大きくすれば、反射した時に面白い動きをします。 ■ 画像の進む方向と直角に揺れる速さを入力します。(大きいほど速く揺れる) ■ 「0」から順に表示したい数の画像を、アドレスを含むファイル名で指定します。 画像を2つ以上指定すると、反復する度に画像がに変わり、指定順に繰り返します。 ■ 画面に同時に出したい画像数を入力します。 ■ 途中で流れる画像を1個だけにするなら 1 を指定。 (この時、1つ表示される画像は ugoku[0] で指定した画像になります。) ずっと指定数の画像を表示するなら -1 を指定。 ■ 画面をスクロールさせた時、画像も同時にスクロールさせたいので 0 を指定。 ■ 動きの全体の速さを入力します。(大きいほど速いが、負担大) // ***************************** 入力事項 ****************************** // ======= 入力1:画像の種類と流れる方向、流れ方,および範囲 // 1〜2番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力 // 3〜4番目の数字で「表示幅」と「表示高さ」( px )を入力 // 「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する。 // 5番目の数字で、移動の方向の最大速さを入力(大きい程速い 標準値 30) // 6番目の数字で、揺れの方向の最大幅をピクセル値で入力(標準値 30) // 7番目の数字で、揺れの方向の最大速さを入力(大きい程,早く荒い 標準値 10) // 8番目以降で、出したい画像の種類を必要数だけ入力(0から順に) // 画像が2つ以上あるときは、反復する度に、画像が変わる。 ugoku[0]=new Array(0,0, 0,0, 50, 40,12, "../parts/ga1.gif", "../parts/ga5.gif", "../parts/ga9.gif"); ugoku[1]=new Array(0,0, 0,0, 40, 35,10, "../parts/ga2.gif", "../parts/ga6.gif", "../parts/gaa.gif"); ugoku[2]=new Array(0,0, 0,0, 30, 30, 8, "../parts/ga3.gif", "../parts/ga7.gif", "../parts/gab.gif"); // ======= 入力2:補助入力事項 var no = 3 ; // 画面に同時に出す画像数を入力 var hsw = 1 ; // 途中で流れる画像を1個だけするか?( yes=1 , no=-1 ) // 1個表示されるのは、ugoku[0]で指定した画像です。 var srl = 1 ; // 画像も同時にスクロールさせるか? ( yes=1 , no=-1 ) // 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする var chg = 10 ; // 一秒当たりの描画の切替え回数(初期値 10) // *************************** 入力事項ここまで **************************
<script type="text/javascript">
<!--// mov_rdm ver 3.00 (ぱーぷりんの溜まり場)
ugoku=new Array(); // この行は触らないで・・
// ***************************** 入力事項 ******************************
// ======= 入力1:画像の種類と流れる方向、流れ方,および範囲
// 1〜2番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// 3〜4番目の数字で「表示幅」と「表示高さ」( px )を入力
// 「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する。
// 5番目の数字で、移動の方向の最大速さを入力(大きい程速い 標準値 30)
// 6番目の数字で、揺れの方向の最大幅をピクセル値で入力(標準値 30)
// 7番目の数字で、揺れの方向の最大速さを入力(大きい程,早く荒い 標準値 10)
// 8番目以降で、出したい画像の種類を必要数だけ入力(0から順に)
// 画像が2つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=new Array(0,0, 0,0, 50, 40,12, "../parts/ga1.gif",
"../parts/ga5.gif", "../parts/ga9.gif");
ugoku[1]=new Array(0,0, 0,0, 40, 35,10, "../parts/ga2.gif",
"../parts/ga6.gif", "../parts/gaa.gif");
ugoku[2]=new Array(0,0, 0,0, 30, 30, 8, "../parts/ga3.gif",
"../parts/ga7.gif", "../parts/gab.gif");
// ======= 入力2:補助入力事項
var no = 3 ; // 画面に同時に出す画像数を入力
var hsw = 1 ; // 途中で流れる画像を1個だけするか?( yes=1 , no=-1 )
// 1個表示されるのは、ugoku[0]で指定した画像です。
var srl = 1 ; // 画像も同時にスクロールさせるか? ( yes=1 , no=-1 )
// 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする
var chg = 10 ; // 一秒当たりの描画の切替え回数(初期値 10)
// *************************** 入力事項ここまで **************************
// 共通変数・配列の設定
var off_w, off_h, doc_x, doc_y, hen;
dgr=new Array(); xza=new Array(); yza=new Array(); amp=new Array();
mkx=new Array(); mky=new Array(); kaku=new Array(); stz=new Array();
sdg=new Array(); img_w=new Array(); img_h=new Array();
marg_t=new Array(); marg_l=new Array(); disp_w=new Array(); disp_h=new Array();
Gy=new Array(); Gx=new Array(); Gp=new Array();
// 初期値の設定
ingN=0; brSize(); dx=0; dy=0; dpsw=1; prima=-1;
for(i=0; i<no; i++){
Gy[i]=ingN; Gx[i]=ugoku[ingN].length-1; Gp[i]=7;
document.write("<div id='dot"+i+"' style='position:absolute; z-index:53'>"
+"<img src='"+ugoku[Gy[i]][Gp[i]]+"' id='img"+i+"'></div>")
dgr[i]=Math.random()*6.24;
kaku[i]=0.44+Math.random()*0.69;
ddx=Math.sin(kaku[i]); ddy=Math.cos(kaku[i]);
marg_t[i]=ugoku[ingN][0]; marg_l[i]=ugoku[ingN][1];
disp_w[i]=ugoku[ingN][2]; disp_h[i]=ugoku[ingN][3];
prim(i);
if(Math.random()<0.5){ mkx[i]=1 } else{ mkx[i]=-1 }
if(Math.random()<0.5){ mky[i]=1 } else{ mky[i]=-1 }
xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
if (ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }
Zahyo();
// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){
xza[i]+=mkx[i]*stz[i]*Math.cos(kaku[i]);
yza[i]+=mky[i]*stz[i]*Math.sin(kaku[i]);
dgr[i]+=sdg[i];
dx=amp[i]*Math.sin(dgr[i])*ddx;
if(mkx[i]*mky[i]>0){ dx=-dx }
dy=amp[i]*Math.sin(dgr[i])*ddy;
if(xza[i]+dx>marg_l[i]+disp_w[i]-img_w[i]){
hen=0; prim(i); mkx[i]=-mkx[i];
dx=amp[i]*Math.sin(dgr[i])*ddx;
if(mkx[i]*mky[i]>0){ dx=-dx }
dy=amp[i]*Math.sin(dgr[i])*ddy;
xza[i]=marg_l[i]+disp_w[i]-img_w[i];
if(dx>0){ xza[i]-=dx } } // 右辺
if(xza[i]+dx<marg_l[i]){
hen=1; prim(i); mkx[i]=-mkx[i];
dx=amp[i]*Math.sin(dgr[i])*ddx;
if(mkx[i]*mky[i]>0){ dx=-dx }
dy=amp[i]*Math.sin(dgr[i])*ddy;
xza[i]=marg_l[i];
if(dx<0){ xza[i]-=dx } } // 左辺
if(yza[i]+dy>marg_t[i]+disp_h[i]-img_h[i]){
hen=2; prim(i); mky[i]=-mky[i];
dx=amp[i]*Math.sin(dgr[i])*ddx;
if(mkx[i]*mky[i]>0){ dx=-dx }
dy=amp[i]*Math.sin(dgr[i])*ddy;
yza[i]=marg_t[i]+disp_h[i]-img_h[i];
if(dy>0){ yza[i]-=dy } } // 下辺
if(yza[i]+dy<marg_t[i]){
hen=3; prim(i); mky[i]=-mky[i];
dx=amp[i]*Math.sin(dgr[i])*ddx;
if(mkx[i]*mky[i]>0){ dx=-dx }
dy=amp[i]*Math.sin(dgr[i])*ddy;
yza[i]=marg_t[i];
if(dy<0){ yza[i]-=dy } } // 上辺
Disp("dot"+i, off_w+xza[i]+dx, off_h+yza[i]+dy) }
setTimeout("Zahyo()",1000/chg) }
// 初期データ発生
function prim(i){
if (hsw>0){
if(prima>0 && i==0){
if(dpsw>0){ visi="hidden"; dpsw=-1 } else{ visi="visible"; dpsw=1 }
for(k=1; k<no; k++){ document.getElementById("dot"+k).style.visibility=visi }
} }; prima=1;
document.getElementById("img"+i).src=ugoku[Gy[i]][Gp[i]]; Gp[i]++;
if(Gp[i]>Gx[i]){ Gp[i]=7 }
img_bh=img_h[i]; img_bw=img_w[i];
img_h[i]=document.getElementById("img"+i).height;
img_w[i]=document.getElementById("img"+i).width;
if(hen==0){ xza[i]+=img_bw-img_w[i] }
if(hen==2){ yza[i]+=img_bh-img_h[i] }
if(disp_w[i]==0){disp_w[i]=doc_x-marg_l[i]};
if(disp_h[i]==0){disp_h[i]=doc_y-marg_t[i]};
amp[i]=(0.2+Math.random()*0.8)*ugoku[Gy[i]][5];
sdg[i]=(0.3+Math.random())*ugoku[Gy[i]][6]/100;
stz[i]=(0.7+Math.random())*ugoku[Gy[i]][4]/10; }
// ブラウザのサイズを調べる
function brSize(){
if(document.all){
doc_x=document.body.clientWidth; doc_y=document.body.clientHeight;
off_w=document.body.scrollLeft; off_h=document.body.scrollTop }
else if(document.getElementById){
doc_x=window.innerWidth; doc_y=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>