fullPage.js 的用法

兼容性:

1. 支持 IE8+ 及其他现代浏览器。

主要功能：

1.支持鼠标滚动；

2.支持前进后退键盘控制;

3.多个回调函数;

4.支持手机.移动设备;

5.支持窗口缩放自动调整;

6.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等;

7.支持CSS3动画;

实现方法：

1.插入jquery.fullPage.css;

2.插入jquery.js;

3.插入jquery-ui.js;(用于制作动画)

4.插入jquery.fullpage.js;

HTML:

如果你想定义一个不同的出发点，而不是一段或一部分的第一个幻灯片，只需添加active section，并放在你想加载幻灯片位置前。

为了在一个幻灯片内进行扩展另外的横向幻灯片，每个幻灯片将定义一个div。

    <div id="fullpage">
        <div class="section s1">
            <img src="img/bc8.jpg" alt="">
        </div>
        <div class="section s2">
            <img src="img/bc8.jpg" alt="">
        </div>
        <div class="section s3">
            <img src="img/bc8.jpg" alt="">
        </div>
        <div class="section s4">
            <img src="img/bc8.jpg" alt="">
        </div>
        <div class="section s5">
            <img src="img/bc8.jpg" alt="">
        </div>
    </div>

javaScript:

<script>
    $(function () {
        $('#fullpage').fullpage({
            navigation: 'true'
        });
    });
</script>

配置表:

1.选项

2.方法：

• moveSectionUp() 向上滚动
• moveSectionDown() 向下滚动
• moveTo(section, slide) 滚动到
• moveSlideRight() slide 向右滚动
• moveSlideLeft() slide 向左滚动
• setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动
• setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
• setKeyboardScrolling()添加或删除键盘方向键控制
• setScrollingSpeed() 定义以毫秒为单位的滚动速度

3、回调函数

jQuery全屏滚动插件fullPage.js：http://www.dowebok.com/77.html

转载于：www.cnblogs.com/qinglin/p/7…