javascript实现3D效果-示例4
<html>
<body>
<style>
html {overflow:hidden}
body, .screen {background:#000; overflow:hidden; width:100%; height:100%; position:absolute; margin:0; padding:0}
#screen {left:0; top:0; zoom:1}
#screen span {position:absolute; font-size:0; line-height:0; overflow:hidden}
</style>
<div id="screen" class="screen"></div>
<script>
var srcScreen=document.getElementById("screen");
var x0=300,y0=300,z0=0,R=100,square0=20,square;
var scale=0.5,angle0=4;
var Ay=45;
function Point(x0,y0,R,angle,bgcolor,square0)
{
var spanObj=document.createElement("span");
srcScreen.appendChild(spanObj);
this.square0=square0;
this.x0=x0;
this.y0=y0;
this.R=R;
this.angle=angle;
spanObj.style.width=square0;
spanObj.style.height=square0;
spanObj.style.background=bgcolor;
this.run=function()
{
spanObj.style.left=x0+Math.round(Math.sin(angle*Math.PI/180)*R)+'px' ;
spanObj.style.top=y0+Math.round(Math.cos(angle*Math.PI/180)*Ay)+'px';
//spanObj.style.top=y0+'px';
spanObj.style.background="rgb("+(125*Math.floor((0.5+Math.sin((angle-90)*Math.PI/180))))+",155,155)";
square=Math.round(square0*(1+(Math.cos(angle*Math.PI/180)*scale)));
spanObj.style.zIndex=square;
spanObj.style.width=square;
spanObj.style.height=square;
angle=angle+angle0;
}
}
/*
参数说明：new Point(x0,y0,R,angle,"red",square0);
圆心坐标：x0、y0
转动半径：R
初始角度：angel ,0、90...
背景颜色： red、blue ...
块大小：square0
*/
var array=new Array();
function init()
{
//中环
for(var i=0;i<20;i++)
{
array.push(new Point(300,300,R,i*18,"red",6));
}
//上环
for(var i=0;i<20;i++)
{
array.push(new Point(300,240,60,i*18,"red",6));
}
//下环
for(var i=0;i<20;i++)
{
array.push(new Point(300,360,60,i*18,"red",6));
}
//中间轴线
for(var i=0;i<20;i++)
{
array.push(new Point(300,200+i*12,0,0,"white",2));
}
}
init();
function run()
{
for(var i=0;i<array.length;i++)
{
array[i].run();
}
}
setInterval("run()",100);
</script>
</body>
</html>
效果图如下
