全屏滚动插件fullPage教程详解

阅读更多

【前言】

   之前介绍了全屏滚动插件 fullPage.js，也用该插件制作了一些例子。今天介绍另一款全屏滚动组件，名字也叫 fullpage，只是少了 “.js”

 

【对比】

fullPage.js与fullPage对比：

      与 fullPage.js 相比，fullpage 不依赖任何 js 库，可独立使用。功能上虽然不如 fullPage.js 强大，但一般使用已经足够了，尤其是它的动画效果，你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动

 

【详解】

一、下载代码

在 https://github.com/powy1993/fullpage 下载源代码

 

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

2、引入 fullPage.min.js 文件。

三、写出你要分几屏的html结构，并配上样式

1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分2屏，如下：

    

        

            
第一屏
        
    
    

        

            
第二屏
        
    

 2、为这个结构配上样式，如下:

#pageContain { overflow: hidden; }
.page { display: none; overflow: hidden; position: absolute; top: 0; left: 0; 
       width: 100%; height: 100%; max-width:76.8rem; }
.contain { display: none; position: relative; z-index: 0; width: 100%; height: 100%; }
.current .contain,.slide .contain { display: block; }
.current { display: block; z-index: 1; }
.slide { display: block; z-index: 2; }
.swipe { display: block; z-index: 3; transition-duration: 0ms !important; 
         -webkit-transition-duration: 0ms !important; }
#navBar { display:none;}

 

四、写入JavaScript启动代码

 

如果不用jquery，可以用js的写法代替$选择符：window.onload=function(){｝

最后提醒一下，一定不要忘记写上分页导航列表，缺少这个列表就不起作用了，可以用样式隐藏它

    
1
    
2
    
3
    
4
    
5
    
6

 

 

 

 

 

 

.