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

楕円運動


右のボタンをクリック選択すれば--→

　

●

　

　

　

　

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

<script language="JavaScript"><!--
var flg = true;
var timerID;
function enn(){
  if(flg){
        timerID = setInterval("ennMove()",1);
        bt.innerText = "停止";
        flg = false;
  }else{
        clearInterval(timerID);
        bt.innerText = "楕円運動開始";
        flg = true;
  }
}

var i = 1;
var rx = 120;   //円の水平方向の半径
var ry = 40;    //円の垂直方向の半径
var cx = 250;   //円の中心(x座標、Left位置)
var cy = 180;   //円の中心(y座標、Top位置)

function ennMove(){
  var raj = 2 * Math.PI * i/180;        //ﾗｼﾞｱﾝ値

  dv.style.pixelTop = cy + ry*Math.sin(raj);
  dv.style.pixelLeft = cx + rx*Math.cos(raj);
  i++;
  if(i > 360)i = 1;
} 
function Change(s){
  if(flg){
    if(s == "横幅を大きく")rx += 100;
    if(s == "横幅を小さく")rx -= 100;
    if(s == "縦幅を大きく")ry += 60;
    if(s == "縦幅を小さく")ry -= 60;
        enn();
  }
}
//--></script>
</head>

<body>
<button id="bt" style="cursor:hand" onclick="enn();">楕円運動開始</button><br>
右のボタンをクリック選択すれば--→
<button style="cursor:hand" onclick="Change('横幅を大きく')">横幅を大きく</button>
<button style="cursor:hand" onclick="Change('横幅を小さく')">横幅を小さく</button>
<button style="cursor:hand" onclick="Change('縦幅を大きく')">縦幅を大きく</button>
<button style="cursor:hand" onclick="Change('縦幅を小さく')">縦幅を小さく</button> 

<div id="dv" style="position:absolute;top:150;left:250;width:30;height:30;color:red;font:20pt">●</div>

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