移動しながら円運動
中心を移動しながら、円運動する。
●
中心を移動しながら、円運動する。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var flg = true;
var timerID;
function enn(){
if(flg){
timerID = setInterval("ennMove()",30);
bt.innerText = "停止";
flg = false;
}else{
clearInterval(timerID);
bt.innerText = "円運動開始";
flg = true;
}
}
var i = 1;
var r = 40; //円の半径
var cx = 150; //円の中心(x座標、Left位置)
var cy = 150; //円の中心(y座標、Top位置)
var dx = 1; //円の中心の移動量(Left位置)
var dy = 2; //円の中心の移動量(Top位置)
function ennMove(){
var raj = 2 * Math.PI * i/45; //ﾗｼﾞｱﾝ値を計算
//Math.PIは円周率
dv.style.pixelTop = cy + r*Math.sin(raj);
dv.style.pixelLeft = cx + r*Math.cos(raj);
i++;
cy += dy;
if((cy >= document.body.scrollTop
+document.body.clientHeight-50)
||(cy <= document.body.scrollTop+50)){
dy = -dy; //符号の反転(移動方向を逆転する)
}
cx += dx;
if((cx >= document.body.scrollLeft
+document.body.clientWidth-50)
||(cx <= document.body.scrollLeft+50)){
dx = -dx; //符号の反転(移動方向を逆転する)
}
}
//--></script>
</head>
<body>
<button id="bt" onclick="enn();">円運動開始</button>
<div id="dv" style="position:absolute;top:150;left:250;
width:30;height:30;font:20pt">●</div>
end(最終更新:12/11/12)