1、内容+遮罩层+悬浮对话框

1  2  3  4     
       5      6     29 30 31     32 
      
 
      
33 
      
       34     
       
用户：
35     
       
密码：
36     
       37     
       38 
      
39 40 52 53 

点击后

点击取消按钮恢复原样

2、搜索框

1  2  3  4     
       5      6     14 15 16     17 36 37 

默认样式鼠标点进去

输入几个字符鼠标再出来

3、点击菜单出现相应的内容

1  2  3  4     
       5      6  7  8    30 31     
      
       32         
       
        33             
        
         菜单一
        
34             
        
         35                 
         
          36                     
          
内容1
37                     
          
内容1
38                     
          
内容1
39                 
         
40             
        
41         
       
42         
       
        43             
        44             
        
         菜单二
        
45             
        
         46                 
         
          47                     
          
内容2
48                     
          
内容2
49                     
          
内容2
50                 
         
51             
        
52         
       
53         
       
        54             
        
         菜单三
        
55             
        
         56                 
         
          57                     
          
内容3
58                     
          
内容3
59                     
          
内容3
60                 
         
61             
        
62         
       
63         
       
        64             
        
         菜单四
        
65             
        
         66                 
         
          67                     
          
内容4
68                     
          
内容4
69                     
          
内容4
70                 
         
71             
        
72         
       
73     
      
74 91 92 

点击菜单二

 

 4、隐藏菜单内容

 和第三个差不多，复杂了点，

1  2  3  4     
       5      6     40 41 42 43 
      
       44     
       
        45         
        
         46             
         
价格趋势
47             
         
市场分布
48             
         
其他
49         
        
50     
       
51     
       
        52         
        
         content1
        
53         
        
         content2
        
54         
        
         content3
        
55     
       
56     
      
57 82 83 

      　　点击“市场分布”

5、页面滚动条下拉后自动出现返回顶部按钮

1  2  3  4     
       5      6     36 37 38 
      
       Mr大龙
      
39 
      
       40     
       
        TOP
       
       返回顶部
      
41 56 57 

 

下拉超过50像素之后 出现返回顶部按钮

 

 鼠标移动上去变绿色TOP，点击就会返回顶部

 

 6、插入标签

    
          
      
    
           
           
       
        
        
dalong
        
        
shenwenlong
        
        
wenlong
    
       
    
       
      

默认打开页面

插入一个标签

 7、克隆标签

1  2  3  4     
       5      6  7  8 
Mr大龙
 9 
      
       10     
       
        1
       
11     
       
        2
       
12 
      
13 22 23 

如图，上边的<h>标签是原生的，下边的是克隆后插入的

8、 自动变换菜单

1   2   3   4     
        5       6      47  48  49     
      
        50         
       
         51  52         
       
 53     
      
 54     
      
        55         
       
         56             
        
          57                 
         
第一章
 58                 
         
第二章
 59                 
         
第三章
 60             
        
 61         
       
 62         
       
         63             
        
         床前明月管
        
 64             
        
         疑是地上霜
        
 65             
        
         我是郭德纲
        
 66         
       
 67  68     
      
 69  70 122 123 

滚动超过48px

滚动超过第一个，到达第二个

特殊情况，最后一个高度低，撑不起来一个窗口的高度，拉到底部，最后一个菜单改变