一、頁面切換、組件切換

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。