一、页面切换、组件切换

时间 2019-11-17

标签页面切换组件繁體版

原文原文链接

jQuery全屏滚动插件 fullPage.js

官网：http://www.uedsc.com/fullpage.htmljavascript

引入文件css

<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/jquery.fullPage.js"></script>
	<script src="../js/jquery-ui.js"></script>

使用传入对象html

$(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页面切换事件与当前页面结合起来java

$(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>

触发全部页面事件jquery

触发第一个页面事件css3

组件与component结合动画

triggerHandler不光能够阻止事件冒泡，并且只会影响匹配到的第一个元素，因此用triggerHandler和return false的结果同样，原理不一样。ui

注意：DOM事件的小循环传播---无限循环（子元素与父元素监听相同事件，父元素触发事件执行子元素，子元素触发事件，又会被父元素监听到，陷入无限循环）this

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