HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

飛べ飛べ、トンボ

C
P
G

　

　

　

　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var picX;			//ﾄﾝﾎﾞ画像の左X座標(ｸﾞﾛｰﾊﾞﾙ変数)
var timerID;
var frg = 0;		//ﾌﾗｸﾞ変数(飛ぶ方向を切り替えるため)
function MovePic(){
  picX = pic.style.pixelLeft;
  if(frg==0){		//右方向に飛ぶ場合
    	pic.style.filter = "nothing";	//ﾌｨﾙﾀｰを無効に(右向きﾄﾝﾎﾞに戻す)
	pic.style.pixelLeft = picX + 10;
	pic.style.pixelTop = 90 + Math.sin(picX/60)*30;
	if(picX > document.body.clientWidth-40){
	  frg=1;		//ﾄﾝﾎﾞが右端に達するとﾌﾗｸﾞ変数を切り替える
	  //各絵文字のz-Indexをﾗﾝﾀﾞﾑ(0〜5)に変化さす
	  dv1.style.zIndex = Math.round(Math.random()*5);
	  dv2.style.zIndex = Math.round(Math.random()*5);
	  dv3.style.zIndex = Math.round(Math.random()*5);
	}
  }
  if(frg==1){		//左方向に飛ぶ場合
	pic.style.filter = "fliph()";	//左右反転ﾌｨﾙﾀｰを適用(ﾄﾝﾎﾞを左向きに)
	pic.style.pixelLeft = picX - 10;
	pic.style.pixelTop = 90 + Math.sin(picX/60)*30;
	if(picX < 0){
	  frg=0;	//ﾄﾝﾎﾞが左端に達するとﾌﾗｸﾞ変数を切り替える
	  //各絵文字のz-Indexをﾗﾝﾀﾞﾑ(0〜5)に変化さす
	  dv1.style.zIndex = Math.round(Math.random()*5);
	  dv2.style.zIndex = Math.round(Math.random()*5);
	  dv3.style.zIndex = Math.round(Math.random()*5);
	}
  }
  timerID = setTimeout("MovePic()",150);
}
//--></script>
</head>

<body onload="MovePic();">
<img id="pic" style="position:absolute;top:40;left:10;z-index:3" 
	src="../../java/jadata/ico_213.gif">
<div id="dv1" style="position:absolute;top:50;left:10;
	color:blue;font:85pt webdings;z-index:1">C</div>
<div id="dv2" style="position:absolute;top:30;left:150;
	color:green;font:100pt webdings;z-index:2">P</div>
<div id="dv3" style="position:absolute;top:30;left:330;
	color:skyblue;font:100pt webdings;z-index:5">G</div>
<hr style="position:absolute;top:162;
	left:10;height:10;color:maroon">

<button onclick="clearTimeout(timerID);">[止まれ]</button>
<button onclick="MovePic();">[もっと飛べ]</button>

end(最終更新:12/11/21)