楕円を描いて移動画像をさせる 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>