超详细超简单的fullPage.js插件API实例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>fullPage简单例⼦</title>
<link rel="stylesheet" href="jquery.fullPage.css">
<style>
*{
margin:0;
padding:0;
}
body{
font-size:40px;
color:#000;
}
.slide{
font-size:40px;
text-align:center;
}
#nav{
position:fixed;
left:0;
top: 0;
width:100%;
height:50px;
background:rgba(200,200,200,0.5);
z-index:99;
}
#nav ul{
height:100%;
list-style:none;
overflow:hidden;
}
#nav ul li{
height:100%;
line-height:50px;
margin-left:30px;
float:left;
}
#nav ul li a{
font-size:14px;
color: white;
text-decoration:none;
}
#fullpageMenu{
position:fixed;
right: 0;
top:50%;
z-index:99;
}
#fullpageMenu li{
list-style:none;
width:20px;
height:20px;
background:rgba(200,200,200,0.5);
border-radius:50%;
}
#fullpageMenu li a{
width:100%;
height:100%;
display: block;
border-radius:50%;
}
.active1{
background:white;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">⾸页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">公司介绍</a></li>
</ul>
</div>
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1" class="active1"></a></li>
<li data-menuanchor="page2" class="active"><a href="#page2"></a></li>
<li data-menuanchor="page3" class="active"><a href="#page3"></a></li>
<li data-menuanchor="page4" class="active"><a href="#page4"></a></li>
</ul>
<div id="fullpage">
<div class="section active">
Some section</div>
<div class="section">
<div class="slide">Side1</div>
<div class="slide">Side2</div>
<div class="slide">Side3</div>
<div class="slide">Side4</div>
</div>
<div class="section">Some section
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
jquery是什么选择器<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
<p>我是⼀个兵</p>
</div>
<div class="section">Some section
</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.slimscroll.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
// 通过设置sectionsColor来为每个section设置背景颜⾊
//controlArrows：定义是否通过箭头来控制slide幻灯⽚，默认为true，当我们设置false，则幻灯⽚左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯⽚
//verticalCentered：每⼀页的内容是否垂直居中，默认为true
//resize：字体是否随着窗⼝缩放⽽缩放，默认false
//scrollingSpeed：滚动速度，单位为毫秒，默认为700
//anchors：定义锚链接，默认值为[]。有了锚链接，⽤户就可以快速发开定位到某⼀页⾯注意定义锚链接的时候，值不要和页⾯中任意的id或name相同，尤其是在ie浏览器下，⼆期定义是不需要加#  好处是可以通过url中#page1 #page2等收藏相应    //easing：定义页⾯section滚动的动画⽅式，默认为easeInOutCubic，如果修改此项，需要引⼊jquery.easings，或者jquery ui 差异⽐较⼩没什么⽤
//css3：是否使⽤css3 transforms来实现滚动效果，默认为true，这个配置可以提⾼⽀持css3的浏览器，⽐如移动设备等的速度，如果浏览器不⽀持css3，则会使⽤jquery来替代css3实现滚动效果，jq⽐较卡顿，没有css3效果来的快
// loopTop 滚动到最顶部后是否连续滚动到底部，默认为false
//loopBottom：滚动到最底部后是否连续滚动回顶部，默认为false
//loopHorizontal：横向slider幻灯⽚是否循环滚动，默认为true
//autoScrolling：是否使⽤插件的滚动⽅式，默认为true，如果选择false，则会出现浏览器⾃带的滚动条，将不会按页滚动，⽽是按照滚动条的默认⾏为来滚动
//scrollBar：是否包含滚动条，默认为false，如果设置为true，则浏览器⾃带的滚动条出现，页⾯滚动时还是按页滚动，但是滚动条的默认⾏为也有效
//paddingTop/paddingBottom：设置每⼀个section顶部和底部的padding，默认都为0,⼀般如果我们需要设置⼀个固定在顶部或者底部的菜单、导航、元素等，可以使⽤这两个配置项
//fixedElements：固定的元素，默认为null，需要配置⼀个jquery选择器，在页⾯滚动的时候，fixedElements设置的元素固定不动(重要) 配合css中fixed使⽤
//keyboardScroling：是否可以使⽤键盘⽅向键导航，默认为true
//touchSensitivity：在移动设备中滑动页⾯的敏感性，默认为5，是按百分⽐来平衡的，最⾼为100，最⼤则越难滑动
//continuousVertical：是否循环滚动，默认为false.如果设置为true，则页⾯会循环滚动，⽽不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop\loopBottom不兼容，不要同时设置
//animateAnchor：锚链接是否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页⾯显⽰不在有动画效果，⽐如在第4页我刷新的时候会滚动到第四页如果设置该属性不会有动画
//recordHistory：是否记录历史，默认为true，可以记录页⾯滚动的历史，通过浏览器的前进后退来导航，注意如果设置了autoScrolling:false，那么这个配置也将被关闭，既设置为false
//menu：绑定菜单，设定的相关属性为anchors的值对应后，菜单可以控制滚动，默认为false.可以设置为菜单的jquery选择器
//navigation：是否显⽰导航，默认为false.如果设置为true，会显⽰⼩圆点，作为导航
//navigationPosition：导航⼩圆点的位置，可以设置为left或者right
//navigationTooltips：导航⼩圆点的tooltips设置，默认为[]，注意按照顺序设置
//showActiveTooltip：是否显⽰当前页⾯的导航的tooltip信息，默认为false
//slidesNavigation：是否显⽰横向幻灯⽚的导航，默认为false
//slidesNavPosition：横向幻灯⽚导航的位置，默认为bottom，可以设置为top或bottom
//（重要）scrollOverflow：北荣超过满屏后是否显⽰滚动条，默认为false.如果设置为true，则会显⽰滚动条，如果要滚动查看内容，还⾎药jquery-slimscroll插件的配合。slimscroll插件主要⽤于模拟传统的浏览器滚动条
//sectionSelector:section的选择器，默认为.section
//slideSelector:slide的选择器，默认为.slide
// ⽅法：
//moveSectionUp() 向上滚动⼀页
//moveSectionDown()向下滚动⼀页
//moveTo(section,slide) 滚动到第⼏页，第⼏个幻灯⽚，注意，页⾯时从1开始，⽽幻灯⽚是从0开始
//slientMoveTo(2,2)没有动画效果和moveTo⼀样，滚动到第⼏页
//moveSlideRight()幻灯⽚向右滚动
//moveSlideLeft()幻灯⽚向左滚动
//setAutoScrolling(boolean)：动态设置autoScrolling
//setLockAnchors(boolean)：动态设置lockAnchors
/
/setRecordHistory(boolean)：动态设置recordHistory
//setScrollingSpeed(milliseconds)：动态设置scrollingSpeed
/*setAllowScrolling(boolean,[directions]);
添加或删除⿏标滚轮/滑动控制，第⼀个参数true为启动，false为禁⽤，后⾯的参数为⽅向，取值包含all,up,down,left,right，可以使⽤多个，⼝号分割
*/
/*
destroy(type)
销毁fullpage特效，type可以不写，或者使⽤all，不写type,fullpage给页⾯添加的样式和html元素还在，如果使⽤all，则样式、html等全部销毁，页⾯恢复和不适⽤fullpage相同的效果
reBuild()
重新更新页⾯和尺⼨，⽤于通过ajax请求改变了页⾯结构之后，重建效果
*/
//$.veSectionUp()
//回调函数
/*
afterLoad:function(anchorLink,index)
滚动到某⼀section，且滚动结束后，会触发⼀次此回调函数，函数接受anchorLink和index两个参数，anchorLink是锚链接的名称 ,index是序号，从1开始计算，
我们可以根据anchorLink和index参数数值的判断，触发相应的事件
onLeave:function(index,nextIndex,direction)
在我们离开⼀个section时，会触发⼀次此回调函数，接受index,nextIndex和direction 3个参数
index是离开的“页⾯”的序号，从1开始计算
direction：判断⽹上滚动还是往下滚动，值是up或down
通过return false；可以取消滚动
afterRender:function()
页⾯结构⽣成后的回调函数，或者说页⾯初始化完成后的回调函数
afterResize:function()
浏览器窗⼝尺⼨改变后的回调函数
aterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某⼀幻灯⽚后的回调函数，与afterLoad类似，接受anchorLink、index、slideIndex、direction 4个参数
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们俩开⼀个slide时，会触发⼀次此回调函数，与onLeave类似，接收anchorLink、index、slideIndex、direction 4个参数    */
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor:["green","blue","red","yellow"],
// verticalCentered:false,
// resize:true,
// scrollingSpeed:2000,
anchors:["page1","page2","page3","page4"],
// css3:true,
// loopTop:true,
// loopBottom:true,
// loopHorizontal:true,
// autoScrolling:false,
/
/ scorllBar:true,
// paddingTop:'50px',
// paddingBottom:'0',
// fixedElements:"#nav",
// continuousVertical:true,
// animateAnchor:false,
// recordHistory:true,
// menu:"#fullpageMenu",
// navigation:true,
// navigationPosition:'left',
// navigationTooltips:["page1","page2","page3","page4"],
/
/ showActiveTooltip:true,
// slidesNavigation:true,
// slidesNavPosition:'bottom',
// scrollOverflow:true,
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink"+anchorLink+";index="+index);
},
onLeave:function(index,nextIndex,direction){
console.log("onLeave:index"+index+";nextIndex="+nextIndex+";direction="+direction);
},
afterRender:function(){
console.log("afterRender");
},
afterResize:function(){
console.log("aterResize");
}
});
// ⾃⼰写⼩圆点
// $("#fullpageMenu>li>a").click(function(){
//  // console.log(this)
//  $("#fullpageMenu>li>a").removeClass("active1");
//  $(this).addClass("active1");
/
/ })
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。