js制作的炫酷3D太阳系行星运行效果

想象着打开网页就能浏览太阳系行星的运行情况，促进我们更好的了解这个宇宙星空，于是找到了这样一段代码可以完美的实现这个功能，通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况，效果炫酷，废话不多说，先上个图给大家看看:

 具体的代码如下

index.html

  
    
    
    
    
    
    
    
  
  
    

      Data
      
3D CSS Solar System
      Controls
    
    

      Sun
      Mercury
      Venus
      Earth
      Mars
      Jupiter
      Saturn
      Uranus
      Neptune
    
    

      
        
      
      
        
      
      
        
        Speed
      
      
        
        Size
      
      
        
        Distance
      
    
    

      

        

          

            

              

                

                  
Mercury
                  

                
              
            
          
          

            

              

                

                  
Venus
                  

                
              
            
          
          

            

              

                

                  

                
              
              

                

                  
Earth
                  

                
              
            
          
          

            

              

                

                  
Mars
                  

                
              
            
          
          

            

              

                

                  
Jupiter
                  

                
              
            
          
          

            

              

                

                

                  
Saturn
                  

                
              
            
          
          

            

              

                

                  
Uranus
                  

                
              
            
          
          

            

              

                

                  
Neptune
                  

                
              
            
          
          

            

              
Sun
              

            
          
        
      
    
    
    
    
    
  
  

相关的js代码

$(window).load(function(){

  var body = $("body"),
      universe = $("#universe"),
      solarsys = $("#solar-system");

  var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
      $(this).removeClass('hide-UI').addClass("set-speed");
      $(this).dequeue();
    });
  };

  var setView = function(view) { universe.removeClass().addClass(view); };

  $("#toggle-data").click(function(e) {
    body.toggleClass("data-open data-close");
    e.preventDefault();
  });

  $("#toggle-controls").click(function(e) {
    body.toggleClass("controls-open controls-close");
    e.preventDefault();
  });

  $("#data a").click(function(e) {
    var ref = $(this).attr("class");
    solarsys.removeClass().addClass(ref);
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
  });

  $(".set-view").click(function() { body.toggleClass("view-3D view-2D"); });
  $(".set-zoom").click(function() { body.toggleClass("zoom-large zoom-close"); });
  $(".set-speed").click(function() { setView("scale-stretched set-speed"); });
  $(".set-size").click(function() { setView("scale-s set-size"); });
  $(".set-distance").click(function() { setView("scale-d set-distance"); });

  init();

});

在线预览效果

css,js制作的在线3D太阳系行星运行展示系统