全屏滚动fullpage

fullpage全屏滚动

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

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

引入

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

编写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>

初始化Fullpage

$(document).ready(function() {
$('#fullpage').fullpage({
		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
	});
});

在特殊时刻干特殊的事情

        afterLoad:function (link,index) {
            /*index 序号 1开始  当前屏的序号*/
            $('.section').eq(index-1).addClass('action');
            if(index == 2){
            	setTimeout(function(){
            		$('.w02').hide(2000)
            	},6000)
        	}
        },
        onLeave:function (index,nextIndex,direction) {
            var currentSection = $('.section').eq(index-1);
            if(index == 2 && nextIndex == 3){
                currentSection.addClass('leaved');
            }
        }

$(document).ready(function() {
$('#fullpage').fullpage({
		sectionsColor: ["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
		verticalCentered: false,//定义每一页的内容是否垂直居中
        navigation: true,
        scrollingSpeed: 1000,
        afterLoad:function (link,index) {
            /*index 序号 1开始  当前屏的序号*/
            $('.section').eq(index-1).addClass('action');
            if(index == 2){
            	setTimeout(function(){
            		$('.w02').hide(2000)
            	},6000)
        	}
        },
        onLeave:function (index,nextIndex,direction) {
            var currentSection = $('.section').eq(index-1);
            if(index == 2 && nextIndex == 3){
                currentSection.addClass('leaved');
            }
        }
});