jQuery全屏滚动插件 fullPage.js
官网:http://www.uedsc.com/fullpage.html
引入文件
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/jquery.fullPage.js"></script>
<script src="../js/jquery-ui.js"></script>
使用传入对象
$(function(){
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
anchors: ['page1', 'page2', 'page3', 'page4'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
})
})
组件切换,fullpage页面切换事件与当前页面结合起来
$(function(){
$("#h5").fullpage({
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
//当当前页面离开时,事件回调
onLeave:function( index,nextIndex,direction){//当前位置,下一个位置,方向
$("#h5").find(".page").eq(index-1).trigger("onLeave")
},
//第二个页面载入完成
afterLoad:function(anchorLink ,index){ //锚点名称 ,index
$("#h5").find(".page").eq(index-1).trigger("onLoad")
}
})
//为Dom元素作事件
$('.page').on("onLeave",function(){
console.log($(this).attr("id"),"==>>","onLeave")
})
$('.page').on("onLoad",function(){
console.log($(this).attr("id"),"==>>","onLeave")
})
})
</script>
触发所有页面事件
触发第一个页面事件
组件与component结合
triggerHandler不光可以阻止事件冒泡,而且只会影响匹配到的第一个元素,所以用triggerHandler和return false的结果一样,原理不同。
注意:DOM事件的小循环传播---无限循环(子元素与父元素监听相同事件,父元素触发事件执行子元素,子元素触发事件,又会被父元素监听到,陷入无限循环)
<script>
$(function(){
$("#h5").fullpage({
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
//当当前页面离开时,事件回调
onLeave:function( index,nextIndex,direction){//当前位置,下一个位置,方向
$("#h5").find(".page").eq(index-1).trigger("onLeave");
},
//第二个页面载入完成
afterLoad:function(anchorLink ,index){ //锚点名称 ,index
$("#h5").find(".page").eq(index-1).trigger("onLoad");
}
})
//为Dom元素作事件
$('.page').on("onLeave",function(){ //当前页面触发onLeave事件,component组件执行onLeave事件
console.log($(this).attr("id"),"==>>","onLeave");
$(this).find(".component").triggerHandler("onLeave");//阻止事件向上传播方法一
})
$('.page').on("onLoad",function(){
console.log($(this).attr("id"),"==>>","onLoad");
$(this).find(".component").trigger("onLoad");
})
$('.component').on("onLoad",function(){
$(this).fadeIn(); //渐隐渐现
return false; //事件执行完不向上传播 //阻止事件向上传播方法二
})
$('.component').on("onLeave",function(){
$(this).fadeOut(); //渐隐渐现
})
})
</script>
<body>
<!--
作者:offline
时间:2017-03-03
描述:用于验证fullpage.js切换页面,以及内容组织结构可用,组建能够进行动画
-->
<div id="h5">
<div class="page section" id="page-1">
<div class="component logo"> logo</div>
<div class="component slogan"> slogan</div>
</div>
<div class="page section" id="page-2">
<div class="component desc">desc</div>
</div>
<div class="page section" id="page-3">
<div class="component desc">bar 柱状图</div>
</div>
</div>
</body>