バウンドする絵文字

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

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

<SCRIPT language="JavaScript"><!--
var x = 300;	//現在X座標
var y = 200;  //現在X座標
var dx = 4;	//横方向の増分(減分)
var dy = 6;	//縦方向の増分(減分)

function Move(){
  var bodyCW = document.body.clientWidth; //WWWﾌﾟﾗｳｻﾞの横幅
  var bodyCH = document.body.clientHeight; //WWWﾌﾟﾗｳｻﾞの縦幅
  var bodySCL = document.body.scrollLeft; //WWWﾌﾟﾗｳｻﾞの左端X座標
  var bodySCT = document.body.scrollTop; //WWWﾌﾟﾗｳｻﾞの上端Y座標
 	//bodySCLとbodySCTは、WWWﾌﾟﾗｳｻﾞの上下左右ｽｸﾛｰﾙで変化する
 	
  x += -dx;
  y += -dy;
  //ｳｨﾝﾄﾞｳの左右両端に達したら
  if((x+obj.offsetWidth >= bodyCW+bodySCL)||(x <= bodySCL)){
      ChangeText();
	dx = -dx;		
	if(x <= bodySCL){
		x = bodySCL;
	}else{
		x = bodyCW - obj.offsetWidth + bodySCL;
	}
  }
  //ｳｨﾝﾄﾞｳの上下両端に達したら
  if((y+obj.offsetHeight >= bodyCH+bodySCT)||(y <= bodySCT)){
  	ChangeText();
	dy = -dy;
	if(y <= bodySCT){
		y = bodySCT;
	}else{
		y = bodyCH - obj.offsetHeight + bodySCT;
	}
  }
  obj.style.posLeft = x;
  obj.style.posTop = y;
}

function ChangeText(){
  //左右上下端に達したら、絵柄と色を配列からﾗﾝﾀﾞﾑに変化さす
  ft = new Array("N","Y","f","i","j","k","l","m",
		"r","s","z","!","#","%","&","+","_","8");
  fc = new Array("red","black","blue","green","navy",
	"darkgreen","magenta","brown","maroon","gray","pink","cyan");
  obj.innerText = ft[Math.round((ft.length-1)*Math.random())];
  obj.style.color = fc[Math.round((fc.length-1)*Math.random())];
}
//--></SCRIPT>
</HEAD>

<BODY onload="timerID=setInterval('Move()',20);"
		onunload="clearInterval(timerID);">
<div id="obj" style="position:absolute;top:20px;left:30px;
		width:60;height:60;font:60pt Webdings">N
</div>

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