@kexinWeb 2017-03-04T01:37:52.000000Z 字数 5386 阅读 2059

fullPage.js 插件使用

fullpage plugin

写在前面

fullPage插件是基于jquery框架开发的一个全屏滚动插件，它能够很轻松很方便地做出漂亮的全屏单页网站。

下载安装

npm 安装

npm install fullpage.js
bower 安装

boewr install fullpage.js
官网下载安装

http://alvarotrigo.com/fullPage/
直接引入cdnjs站点上的文件

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.js

引入fullPage文件

本地文件引入

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

引入cdnjs站点文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.3/jquery.fullpage.js"></script>

注意：由于fullpage插件依赖于jquery框架，所以jquery框架要在fullpage前面引用。

开始一个简单的fullpage项目

1.页面结构

<div id='fullpage'>
    <div class="section">第一屏</div>
    <div class="section">
        <div class="slide"> slide1 </div>
        <div class="slide"> slide2 </div>
        <div class="slide"> slide3 </div>
    </div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
    <div class="section">第五屏</div>
</div>

2.js代码

<script type="text/javascript">
    $(function() {
	$('#fullpage').fullpage();
    });
</script>

配置项

//当页面加载完毕之后执行函数
$(document).ready(function() {
//配置fullpage
$('#fullpage').fullpage({
//Navigation
menu: false,//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
lockAnchors: false,//锁定锚链接不随页面滑动而改变
anchors:['firstPage', 'secondPage'],//锚链接，数组中元素对应各个页面的锚链接
navigation: false,//有无导航栏
navigationPosition: 'right',//导航栏位置
navigationTooltips: ['firstSlide', 'secondSlide'],//导航栏提示文字，与页面一一对应
showActiveTooltip: false,//是否显示当前页面提示文字
slidesNavigation: true,//有无幻灯片（横向）导航栏
slidesNavPosition: 'bottom',//幻灯片（横向）导航栏位置
//Scrolling
css3: true,//是否支持css3动画
scrollingSpeed: 700,//滚动速度，以毫秒为单位
autoScrolling: true,//是否自动滑动
fitToSection: true,//每一屏是否自动适应视窗（viewport）大小
scrollBar: false,//是否有滚动条
easing: 'easeInOutCubic',//全屏滚动效果，需要jquery.easing.js或者jqueryUI的支持
easingcss3: 'ease',//css3动画过度效果
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',//设置不受默认滚动行为限制的正常滚动的元素
scrollOverflow: false,//页面内容溢出后是否隐藏
touchSensitivity: 15,//触摸敏感度
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,//是否把滚动状态记入浏览器的历史记录里
//Design
controlArrows: true,//幻灯片滚动控制箭头
verticalCentered: true,//section内容是否垂直居中
resize : false,//字体大小是否根据窗口大小
sectionsColor : ['#ccc', '#fff'],//每一页的背景颜色
paddingTop: '3em',//section内上边距
paddingBottom: '10px',//section内下边距
fixedElements: '#header, .footer',//固定的元素，如主导航栏
responsiveWidth: 0,
responsiveHeight: 0,//官方文档：A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.
//Custom selectors
sectionSelector: '.section',//当页面重新加载的时候直接定位到指定的section
slideSelector: '.slide',//当页面重新加载的时候直接定位到指定的slide
//callback
onLeave: function(index, nextIndex, direction){},//离开section
afterLoad: function(anchorLink, index){},//加载完section
afterRender: function(){},//渲染整个页面后
afterResize: function(){},//重新resize之后
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},//加载完某一个slide后 slideIndex)
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}//离开某一个slide后
});
});

方法

1.moveSectionUp()

$.fn.fullpage.moveSectionUp();

2.moveSectionDown()

$.fn.fullpage.moveSectionDown();

3.moveTo(section, slide)

$.fn.fullpage.moveTo('firstSlide', 2);

$.fn.fullpage.moveTo(3, 0);

4.silentMoveTo(section, slide)

$.fn.fullpage.silentMoveTo('firstSlide', 2);

5.moveSlideLeft()

$.fn.fullpage.moveSlideLeft();

moveSlideRight()也是如此

$.fn.fullpage.moveSlideRight();

6.setAutoScrolling(boolean)

$.fn.fullpage.setAutoScrolling(false);

7.setFitToSection(boolean)

$.fn.fullpage.setFitToSection(false);

8.setLockAnchors(boolean)

$.fn.fullpage.setLockAnchors(false);

9.setAllowScrolling(boolean, [directions])

disabling scrolling

$.fn.fullpage.setAllowScrolling(false);
disabling scrolling down

$.fn.fullpage.setAllowScrolling(false, 'down');
disabling scrolling down and right

$.fn.fullpage.setAllowScrolling(false, 'down, right');

10.setKeyboardScrolling(boolean, [directions])

disabling all keyboard scrolling

$.fn.fullpage.setKeyboardScrolling(false);
disabling keyboard scrolling down

$.fn.fullpage.setKeyboardScrolling(false, 'down');
disabling keyboard scrolling down and right

$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

11.setRecordHistory(boolean)

$.fn.fullpage.setRecordHistory(false);

12.setScrollingSpeed(milliseconds)

$.fn.fullpage.setScrollingSpeed(700);

13.destroy(type)

$.fn.fullpage.destroy();

destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.

$.fn.fullpage.destroy('all');

14.reBuild()

$.fn.fullpage.reBuild();

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

关于自定义Section高度

只需要给Section添加.fp-auto-height类就可以实现自定义高度。

参考资料

https://github.com/alvarotrigo/fullPage.js#options
https://www.uedsc.com/fullpage.html
http://www.uedsc.com/fullpage-introduction.html