以前看过一个哥们的博客，用js实现立方体旋转（jscube.js），稍微加以修改了下，实现卫星旋转效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0059)http://www.codesky.net/article/200508/javascript/825ye1.htm -->
<html>
<head>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.7600.17051">
<title>Satellite Rendering</title>
<style>
div{
width:200px;
height:200px;
}
</style>
<script src="http://files.cnblogs.com/pinsige/jscube.js"></script>
</head>
<body onload="Setting()">
<div id="a"><img src="a0.jpg" width="200" height="200"></div>
<div id="b"><img src="a1.jpg" width="200" height="200"></div>
<div id="c"><img src="a2.jpg" width="200" height="200"></div>
<div id="d"><img src="a3.jpg" width="200" height="200"></div>
<div id="e"><img src="a4.jpg" width="200" height="200"></div>
<div id="g"><img src="a5.jpg" width="200" height="200"></div>
<SPAN style="POSITION: relative; FONT: bold 24pt arial; VISIBILITY: hidden" id="Set">
<P> </P>
<P><FONT color="#ffff00">Welcome to I - TIME ！</FONT><br />
</P>
</SPAN>
<script>
var IsIE4 = (navigator.appVersion.charAt(0) >= 4 && navigator.appName == "Microsoft Internet Explorer");
var IsNN4 = (navigator.appVersion.charAt(0) >= 4 && navigator.appName == "Netscape");
var CenterX,CenterY,Pi,Inc;
var Circle = new Array();
var Pos = new Array();
//IE
//BodyWidth = document.body.offsetWidth;
//BodyHeight = document.body.offsetHeight;
//firefox
BodyWidth = document.body.clientWidth;
BodyHeight = document.body.clientHeight;
CenterX = BodyWidth / 2 - 5;
CenterY = BodyHeight / 2 - 5;
function SetCenter()
{
this.left = (innerWidth - this.clip.width) / 2;
this.top = (innerHeight - this.clip.height) / 2;
}
function Setting()
{
var doc = (IsNN4)? "document." : "document.all.";
var obj = (IsNN4)? "" : ".style";
for(i=0;i<=5;i++) //Circle[i] = eval(doc+"Circle"+i+obj);
{
Circle[i]=new Cube();
Circle[i].setLight(true);
Circle[i].setRadius(30);
Circle[i].rotate(45,0,45);
for(var j=0;j<6;j++){
var sdd = document.createElement(‘img‘);
sdd.src = "img/a"+i+".jpg";
sdd.width=60;
sdd.height=60;
Circle[i].setFace(j,sdd);
}
}
Radius = 100;
Pi = Math.PI;
Inc = Pi/720;
Pos[0] = 0;
for(i=1;i<Circle.length;i++) Pos[i] = parseFloat(Pos[i-1] + ((2*Pi)/Circle.length));
setInterval(function(){for(i=0;i<Pos.length;i++)
{
Pos[i] = Pos[i] + Inc;
left1 = 5*Radius*Math.cos(Pos[i]) + CenterX - 5;
top1 = Radius*Math.sin(Pos[i]) + CenterY - 5;
Circle[i].setLocate(left1,top1);
Circle[i].rotate(0,1,0);
} },10);
}
setInterval("Last()",1);
function Last()
{
for (i=0;i<Pos.length;i++)
{
Circle[i].visibility = "visible";
}
for(i=0;i<Pos.length;i++)
{
Pos[i] = Pos[i] + Inc;
Circle[i].left = 5*Radius*Math.cos(Pos[i]) + CenterX - 5;
Circle[i].top = Radius*Math.sin(Pos[i]) + CenterY - 5;
var str=parseInt(Circle[i].top);
//alert(str);
if(str>CenterY) {
Circle[i].setIndex(999);
}
else
{
Circle[i].setIndex(-999);
}
}
}
var f = new Cube();
f.setLight(true);
f.setFace(0,document.all.a);
f.setFace(1,document.all.b);
f.setFace(2,document.all.c);
f.setFace(3,document.all.d);
f.setFace(4,document.all.e);
f.setFace(5,document.all.g);
f.setLocate(CenterX,CenterY);
f.setRadius(100);
f.rotate(45,0,45);
setInterval(function(){f.rotate(0,1,0);},10);
</script>
</body>
</html>
有点卡，纯属娱乐！
时间： 2024-11-12 01:40:34