全屏滚动实现之fullPage.js（一）

fullPage.js--基于 jQuery 的全屏滚动插件

简介

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。

fullPage.js的主要功能有：

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

兼容性

fullPage.js具有良好的兼容性，比如对IE8、IE9、Opera12，以及一些不支持css3的一些老式浏览器也很友好；同时兼容移动端。

使用说明

1.引入插件文件

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<!-- 此插件依赖于jQuery，需在Fullpage插件之前引入。-->
<script src="../jquery/1.11.1/jquery.min.js"></script>
<!-- 可选。若需自定义页面滚动效果，则需引入jquery.easings.min.js文件。-->
<script src="../jquery.easings.min.js"></script>
<!-- 可选。对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，需要自定义滑条滚动效果：scrollOverflow:true -->
<script type="text/javascript" src="../scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

 

2.编写HTML代码

 

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

 

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

<div class="section active">Some section</div>

 

Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

 

<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>
</div>

 

为了让自定义导航菜单和屏幕section互动，需要给菜单添加一个HTML5的自定义属性（data-menuanchor），需要和锚文本设置相同的内容，例如下面的示例代码：

 

<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'
});

 

注意：注意这个自定义的菜单代码应该放置到插件设置的内容外面，避免因为排版不兼容问题可以使用css3:true，否则将被附加到body的插件本身。

 

 

3.初始化

 

$(function() {
	$('#fullpage').fullpage();
});

 

带有所有选项的初始化如下所示：

 

$(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。
        anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]
        lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变
        navigation: false,//是否显示导航，默认为false
        navigationPosition: 'right',//导航小圆点的位置
        navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示
        showActiveTooltip: false,//是否显示当前页面的tooltip信息
        slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false
        slidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom


        //Scrolling
        css3: true,//是否使用CSS3 transforms来实现滚动效果，默认为true
        scrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700
        autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
        fitToSection: true,//设置是否自适应整个窗口的空间，默认值：true
        scrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
        easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件
        easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件
        loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false
        loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false
        loopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为true
        continuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
        normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图
        scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
        touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
        normalScrollElementTouchThreshold: 5,


        //Accessibility
        keyboardScrolling: true,//是否可以使用键盘方向键导航，默认为true
        animateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
        recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭


        //Design
        controlArrows: true,//定义是否通过箭头来控制slide,默认true
        verticalCentered: true,//定义每一页的内容是否垂直居中，默认true
        resize : false,//字体是否随窗口缩放而缩放，默认false
        sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性
        paddingTop: '3em',设置每一个section顶部的padding,默认为0
        paddingBottom: '10px',设置每一个section底部的padding,默认为0
        fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
        responsiveWidth: 0,
        responsiveHeight: 0,


        //Custom selectors
        sectionSelector: '.section',//section选择器。默认为.section
        slideSelector: '.slide',//slide选择器，默认为.slide


        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});