首页 > 代码库 > js实现卫星效果图
js实现卫星效果图
以前看过一个哥们的博客，用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>
有点卡，纯属娱乐！
js实现卫星效果图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。