JS 圆形排列遇到麻烦了~！
不知道是哪里出了问题，求出的横坐标和纵坐标不对，
求指点，谢谢....
<!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">window.onload=function(){ var oCon=document.getElementById('con'); var oYuan=document.getElementById('yuan'); var oYuanLeft=(oCon.offsetWidth-oYuan.offsetWidth)/2; var oYuanTop=(oCon.offsetHeight-oYuan.offsetHeight)/2; var start=0;//起始角度 //圆半径 var r=oYuan.offsetWidth/2; //要排列的标签个数 var oDivNum=oYuan.childNodes.length; //每个标签对应的角度 var avd=360/oDivNum; //每个标签对应的弧度 var X=avd*Math.PI/180; oYuan.style.left=oYuanLeft+'px';//设置圆的横坐标 oYuan.style.top=oYuanTop+'px';//设置圆在纵坐标 for(var i=0;i<oDivNum;i++){ oYuan.childNodes[i].style.left=Math.sin(X*i)*r+oYuanLeft+'px'; oYuan.childNodes[i].style.top=Math.cos(X*i)*r+oYuanTop+'px'; } };</script></head><body><div id="con" style=" width:950px; height:400px; background-color:#bf0000; position:relative;"> <div id="yuan" style="width:400px; height:400px; background-color:#000; position:absolute; left:0px; top:0px;"> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:8;">1</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:7;">2</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:6;">3</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:5;">4</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:4;">5</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:3;">6</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:2;">7</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:1;">8</div> </div></div></body></html><!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">window.onload=function(){ var oCon=document.getElementById('con'); var oYuan=document.getElementById('yuan'); var oYuanLeft=(oCon.offsetWidth-oYuan.offsetWidth)/2; var oYuanTop=(oCon.offsetHeight-oYuan.offsetHeight)/2; var start=0;//起始角度 //圆半径 var r=oYuan.offsetWidth/2; //要排列的标签个数 var oDivNum=oYuan.childNodes.length; //每个标签对应的角度 var avd=360/oDivNum; //每个标签对应的弧度 var X=avd*Math.PI/180; oYuan.style.left=oYuanLeft+'px';//设置圆的横坐标 oYuan.style.top=oYuanTop+'px';//设置圆在纵坐标 var width = oYuan.offsetWidth; var height = oYuan.offsetHeight; var left = width / 2; var top = height / 2; for(var i=0;i<oDivNum;i++){ if( oYuan.childNodes[i].nodeType == 3 ) continue; oYuan.childNodes[i].style.left=Math.sin(X*i)*r+left+'px'; oYuan.childNodes[i].style.top=Math.cos(X*i)*r+top+'px'; }};</script></head><body><div id="con" style=" width:950px; height:400px; background-color:#bf0000; position:relative;"> <div id="yuan" style="width:400px; height:400px; background-color:#000; position:absolute; left:0px; top:0px;"> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:8;">1</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:7;">2</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:6;">3</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:5;">4</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:4;">5</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:3;">6</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:2;">7</div> <div style="width:30px; height:30px; background-color:#fff; position:absolute; left:0px; top:0px; z-index:1;">8</div> </div></div></body></html>
[解决办法]
javascript画圆
参考这个