全屏滚动-fullPage

全屏网站看起来很爽的样子 先看iPhone的网站体验一哈，高端大气上档次 今天使用jQuery插件fullPage.js来实现全屏滚动的效果 #####主要功能

• 支持鼠标滚动
• 支持先后进退和键盘控制
• 多个回调函数
• 支持手机，平板触摸事件
• 支持CSS3动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

使用方法

1.引入文件

• 方式一 1.经过Bower下载： bower install fullpage --save 2.引入

<link rel="stylesheet" type="text/css" href="/bower_components/fullpage/jquery.fullPage.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="/bower_components/fullpage/jquery.fullPage.js"></script>

复制代码

• 方式二 经过CDN引入fullPage.js

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>
复制代码

2.html文件结构

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>
复制代码

在每一屏中还能够包含能够在水平方向上滚动切换的slide。

<div id="full-page">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>
复制代码

3.js文件内容

<script>
        $(function(){
            $('#dowebok').fullpage();
            // 调用此方法进行初始化
        });
    </script>    
复制代码

这样子就能够实现啦。 实现文件地址