下面给2个上下滑屏的例子~

实例一，简单的上下滑屏

实例二，简单的上下滑屏，滑动中附加了动画~

设计滑屏框架的办法一般有2种

• 控制父容器法
• 控制子容器法                                                                                                                                                

  控制父容器法

  通过控制父元素的transform: translateY或margin-top或top的值来上下滑动页面，每次的位移的取值为当前页面高度~

  

  这里采用slip框架，库大小5.75K，非常轻量，可以放心用在你的项目~

  slip框架的页面样式需要自定义，不过这里我简单写好了~

  (如果你不使用框架，推荐用transform: translate(X,Y)的写法，首先transform: translate可设计高性能动画，其次兼容android2.3+的系统，transform: translateY不兼容android2.3的系统)

  兼容ios5+、android2.3+系统，其滑屏功能，响应灵敏~如果你只需要设计简单的滑屏效果，可考虑它~

  slip框架更多详细的功能猛击这里

  代码：

         
         
         
         
         
          
         
      
          
          
           
                    第1屏        
           
          
           
                    第2屏        
           
          
           
                    第3屏        
           
          
           
                    第4屏        
           
      
          
         

  控制子容器法

  方法是只显示其中一个子元素，其它隐藏，滑屏时隐藏当前元素，并显示当前元素的下一个同辈元素~

  

  这里采用fullPage框架，库大小7.69K~

  fullPage框架的页面样式无需自定义，已有写好的

  兼容ios5+、android2.3+、winphone 8系统，其滑屏功能，效果比较丰富，支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果，可考虑它~

  fullPage框架更多详细的功能猛击这里

  代码：

         
         
         
         
         
         
         
           
         
         
         
          
          
          
           
                        第一屏        
           
      
          
      
          
          
           
                        第二屏        
           
      
          
      
          
          
           
                        第三屏        
           
      
          
      
          
          
           
                        第四屏        
           
      
          
         
         

   本文章转自于：http://www.cnblogs.com/PeunZhang/p/4185020.html