用的原理是 x*x+y*y=r*r
<div id=a style="background:red;width:100px;height:100px"></div>
<script>
var a=document.getElementById("a")
var b=function(element,x){
element.style.left=x;
element.style.top=Math.sqrt(1600 - x * x)
}
for(var i=100;i<500;i+=10){
var ss=setInterval('b(a,i)',10);
if(i==450)clearInterval(ss)
}
</script>
<div id=a style="background:red;width:100px;height:100px"></div>
<script>
var a=document.getElementById("a")
var b=function(element,x){
element.style.left=x;
element.style.top=Math.sqrt(1600 - x * x)
}
for(var i=100;i<500;i+=10){
var ss=setInterval('b(a,i)',10);
if(i==450)clearInterval(ss)
}
</script>
1600横大于x*x????? (0<x<450)
负数可以开平方根？？？？
element.style.top=Math.sqrt(1600 - x * x)这个关系应该不对，不是圆形轨迹
<script >
var i, ss;
i = 100;
var b=function(element){
element.style.left = i;
element.style.top = parseInt(Math.sqrt(202500 - i * i))
i +=10;
if(i==450) clearInterval(ss);
}
window.onload=function(){
var a=document.getElementById("a")
ss=setInterval((function(obj){
return function(){b(obj);}
})(a),100);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function animateCss(element, numFrames, timePerFrame, animation, whendone){
var frame = 0;
var time = 0;
var intervalId = setInterval(displayNextFrame, timePerFrame);
function displayNextFrame(){
if(frame >= numFrames){
clearInterval(intervalId);
if(whendone){
whendone(element);
}
return;
}
for(var cssprop in animation){
try{
element.style[cssprop] = animation[cssprop](frame, time);
}catch(e){}
} frame++;
time+= timePerFrame;
}
}
</script></head><body>
<div id="title" style="position:absolute;font-weight:bold;font-size:50px;color:red"/>.</div>
<script type="text/javascript">
<!--
animateCss(document.getElementById("title"),100, 50,
{
left: function(f,t){ return 200 + 100*Math.cos(f/8) + "px"},
top: function(f,t){return 200 + 100*Math.sin(f/8) + "px";}
},
function (obj){obj.innerHTML = "Finsh"}
);//-->
</script>
</body>
</html>
@5楼 虽然可以 但是我想要最简单的版本
有没有最简单的
例如：把我的例子给的成功执行 就可以
谢谢 等高人
虽然sin cos也可以实现 但我想知道 为什么x*x+y*y=r*r 在这不行？？？
<head>
<title>测试javascript画圆</title>
<script language="javascript">
var pointx = 150; //圆心x坐标
var pointy = 150; //圆心y坐标
var r = 40; //圆半径
var b=function(element){
var x = element.style.left;
var y = element.style.top;
x = x.substring(0,3);
y = y.substring(0,3);
if(x>150 && y>=150){ //右下半圆
//alert("右下半圆: x="+x+" y="+y);
x = x - 5;
y = pointy + Math.abs(Math.sqrt(1600 - Math.pow((x - pointx),2)));
element.style.left = x+"px";
element.style.top = y+"px";
}else if(x<=150 && y>150){ //左下半圆
//alert("左下半圆: x="+x+" y="+y);
x = x - 5;
y = pointy + Math.abs(Math.sqrt(1600 - Math.pow((x - pointx),2)));
element.style.left = x+"px";
element.style.top = y+"px";
}else if(x<150 && y<=150){ //左上半圆
//alert("左上半圆: x="+x+" y="+y);
x = parseInt(x) + 5;
y = pointy - Math.abs(Math.sqrt(1600 - Math.pow((x - pointx),2)));
//alert("左上半圆: x="+x+" y="+y);
element.style.left = x+"px";
element.style.top = y+"px";
}else if(x>=150 && y<150){ //右上半圆
//alert("右上半圆: x="+x+" y="+y);
x = parseInt(x) + 5;
y = pointy - Math.abs(Math.sqrt(1600 - Math.pow((x - pointx),2)));
element.style.left = x+"px";
element.style.top = y+"px";
}
}
function circlestart(){
var a = document.getElementById("a");
var ss = setInterval('b(a)',10);
}
</script>
</head>
<body onload="circlestart()">
<div id="a" style="background-color:red;left:150px;top:190px;width:10px;height:10px;position:absolute;"></div>
</body>
</html>