fullpage使用技巧

介绍

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

• 支持鼠标滚动

• 支持前进后退和键盘控制

• 多个回调函数

• 支持手机、平板触摸事件

• 支持 CSS3 动画

• 支持窗口缩放

• 窗口缩放时自动调整

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

fullpage.js兼容jquery1.7以上版本，兼容ie8+浏览器，谷歌、火狐、opera浏览器都兼容。

配置

常见的配置如下：

$(function(){
       $('#dowebok').fullpage({
        slidesColor: ['#0075D1','#C2E5FF','#FDF6E1','#E9E9E9','#F3F3F3','#F9F3DC'],//每一屏的背景色
        anchors: ['page1','page2','page3','page4','page5','page6'],//每一屏的锚点名称
        navigation：false//是否显示项目导航
        navigationPosition：right,//项目导航的位置，可选 left 或 right
        afterRender: function(){
            //此处为页面渲染后执行的事件
           })，
        afterLoad: function (anchorLink,index) {
            //此处为跳转到该屏时执行的事件，参数anchorLink 是锚链接的名称，index 是section的索引，从1开始计算
        }，
        onLeave: function (index,nextIndex，direction) {
            /* 此处为离开该屏时执行的事件，参数index 是section的索引，从1开始计算，
               nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。*/
        }
});`

使用自定义导航

有时我们想自己设定导航的样式，可以不使用配置中默认的navigation选项，使用menu选项指定我们自定义的导航所对应的dom结构。

menu："#menu"

在dom结构中：

这样就能够让我们绑定菜单，从而可以控制滚动。

预览

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!