JS implements the nationwide city switch navigation effect sliding down from the top of the webpage _ javascript skills

This article mainly introduces the effect of JS on implementing the nationwide city switch navigation that slides down from the top of the webpage. It involves javascript mouse events and page element display implementation skills and has some reference value, for more information, see the examples in this article. Share it with you for your reference. The details are as follows:

This is a JS version of the top of the page slide down the city switch navigation, similar to sohu Group buy page on the top of the city navigation switch, from the top slide down, to facilitate switching between other cities. It is implemented by using a JS encapsulation plug-in of the original sohu network version. Currently, it is only for demonstration purposes. Therefore, all cities in China are incomplete. You can add the plug-in by yourself.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-web-scroll-city-cha-style-codes/

The Code is as follows:

Switch city navigation from top to bottom
 
 
 
  
  
 
   
 
    
Beijing
 
    
Shanghai
 
    
Guangzhou
 
    
Shenzhen
 
    
Xi'an
 
   
 
   
 
    
Tianjin
 
    
Nanjing
 
    
Chengdu
 
    
Hangzhou
 
    
Jinan
 
   
 
   
 
    
Harbin
 
    
Hainan
 
    
Shenyang
 
    
Dalian
 
    
Shijiazhuang
 
   
 
   
 
    
Changchun
 
    
Zhengzhou
 
    
 
 
    
 
 
    
 
 
    
 
 
   
 
  
 
 
Collapse
 
 
     
  
  
Beijing
     
  
  
Switch City