js实现卫星效果图

浏览数：36 / 时间：2015年06月09日

以前看过一个哥们的博客，用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>