Web effects-Simple timeline implementations

Previously seen on the internet, there are a lot of people write the timeline effect, so they also imitate write write.
Here's how to write your own solution (transverse and longitudinal axes).

Simple timeline effect is easy to implement, but if you need to look like a model, you need to design the layout of the page.

1. Use JS to add a simple interface layout, to achieve the time axis mouse click rotation picture effect (portrait).

Implementation of ideas: the use of multiple div plus background color to do vertical timeline style, with CSS positioning layout (timeline is generally relative to the browser window position to avoid floating), plus the corresponding text description. (: After,:before, etc. can achieve its effect), and finally in the use of JS to add some simple mouse events.

HTML code

 

           
  

                 
   

     Sea of Clouds 
   
             
   

     Waterfall 
   
              
   

     Ancient tree              
    

      Sunset 
    
              
    

      Sea 
    
          
   
         
   
              
   

                 
    
              
    
              
    
         
   
      
  
     
  
 
 

CSS Code

#timeline {                Position:
Fixed
                width:100%;
                height:100%;
                left:30px;
                top:180px;                             }              #textout {                width
: 35px;
                Float:left;                 height:100%;
                margin-left:20px;
                padding-top:10px;
                Cursor:pointer;            }              #lineout {            
    width:4px;
                height:100%;
                Float:left;
                margin-left:5px;                        }             line{      
          width:4px;
                height:50px; 
                background: #ccc;                             }              text{                Width:
35px;
                height:50px;            }             #picture {   
             width:1000px;
                height:500px;
                margin-top:50px;
                Margin-left:auto;
                Margin-right:auto;                             }

JS Code:

Effect Chart:

2. Using jquery plus a simple interface layout, to achieve the time axis mouse click rotation picture effect (landscape).

Implement the idea, use a div to set the background picture, make the horizontal timeline style; add Block element Li, add a simple background picture, to achieve a simple time node effect, and finally in jquery plus the corresponding mouse events, the other page elements to operate.

HTML code

 
 

       
  

             
   
             Great Wall             
    

                       
     
 Great Wall 
              
    
         
         
   
              Changjiang             
    

                      
     
 Changjiang 
             
    
         
         
   
              Shanghai             
    

                       
     
 Shanghai 
             
    
         
         
   
             Expo              
    

                       
     
 Expo 
              
    
         
     & NBsp;   
   
             Chinatown              
    

                       
     
 Chinatown 
              
    
         
         
   
              Forbidden City             
    

                       
     
 Forbidden City 
             
    
          
     
  
 
 
 
 
  

CSS code:

. course_nr{    width:1100px;     height:158px;     Background:url (...
/img/ico1.gif) Repeat-x Center;
    margin-left:120px; 
   }. course_nr li{    float:left;     Background:url (... 
/img/ico2.gif) no-repeat Center top; 
    padding-top:30px; 
    width:140px; 
    Text-align:center; 
    position:relative;
    margin-top:65px; 
       }. shiji{    Position:absolute; 
    width:100%; 
    left:0; 
    top:-20px;
    Display:none; 
   }. Shiji h1{    height:67px; 
    line-height:67px; 
    color: #518dbb; 
    Font-weight:bold;     Background:url (... 
/img/ico3.gif) no-repeat Center top;     margin-bottom:8px; 
   }. Shiji p{    line-height:14px;
    color: #999;    } #backgroundpic {        width:1000px;    
     height:500px;
        margin-top: -38px;
        Margin-left:auto;
        Margin-right:auto;         Background-image:url (...
/img/Great Wall. jpg);    }

JS Code:

Effect Chart: