Image placeholder

fullPage.js–全屏幕滚动的jQuery插件

Image placeholder
F2EX 2014-10-29

fullPage.js

fullPage.js可以很容易的创建一个全屏幕滚动的网站,增加了平滑滚动效果和垂直滑块,兼容老版本浏览器。

快速上手

页面引入(必须)
<script src="jquery.min.js"></script>
<script src="jquery.fullPage.js"></script>

如果你希望用到滑动自带的导航,可以引入
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

出现滚动条,适合超出一屏或者更长的页面,可以引入
<script type="text/javascript" src="scrolloverflow.min.js"></script>

html基本结构,每一个section就是一屏
<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>

每一个竖屏还可以包含一些横向滑动,只需要将‘slide’包含在‘section’内
<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>

如果你希望默认首页是你指定的某一屏,可以在这屏上加上‘active’
<div class="section active">Some section</div>

初始化fullpage.js以及常用的选项和函数
$(document).ready(function() {

	function initialization(){
		$('#myContainer').fullpage({
	        sectionsColor: ['#4A6FB1', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], //每一屏的背景颜色
	        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], //每一屏的锚点名
	        resize: false, //字体是否随着窗口缩放而缩放
	        animateAnchor:false,
		scrollOverflow: true, //内容超过满屏后是否显示滚动条
		autoScrolling:true, //是否使用插件的滚动方式,如果选择false,则会出现浏览器自带的滚动条
		responsive: 900, //响应时间
		menu: '#menu', //定义菜单
		navigation:true, //是否显示导航
		continuousVertical:true, //是否循环滚动,与 loopTop 及 loopBottom 不兼容
		paddingTop: '20px', //上部内边距
	        css3: true, //是否使用 CSS3 transforms 滚动
                
                //滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。
		onLeave: function(index, nextIndex, direction){
		console.log("onLeave--" + "index: " + index + " nextIndex: " + nextIndex + " direction: " +  direction);
		},

                //滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
		afterLoad: function(anchorLink, index){
			console.log("afterLoad--" + "anchorLink: " + anchorLink + " index: " + index );
			},

                //滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
			console.log("afterSlideLoad--" + "anchorLink: " + anchorLink + " index: " + index + " slideAnchor: " + slideAnchor + " slideIndex: " + slideIndex);
		},

                //某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数
		onSlideLeave: function(anchorLink, index, slideIndex, direction){
			console.log("onSlideLeave--" + "anchorLink: " + anchorLink + " index: " + index + " slideIndex: " + slideIndex + " direction: " + direction);
		},

                //页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
		afterRender: function(){
			console.log("afterRender");
		},

                //页面结构重新调整后的回调函数
		afterResize: function(){
			console.log("afterResize");
		}
	});

	//fullPage.js 初始化
	initialization();

	$('#div').click(function(e){
		e.preventDefault();
		do something;
	});

});

更多选项、方法和回调函数请移步到官方网站:

Website Demo


2017-09-02