您的位置：首页 > Web前端 > JavaScript

javascript实现3D效果-示例4

2012-09-14 22:07 399 查看

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>

效果图如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航