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结构中：

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

预览

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。