1. 程式人生 > >Jquery 全屏滾動外掛

Jquery 全屏滾動外掛

簡介

fullPage.js是一個基於jQuery的全屏滾動外掛,它能夠很方便、很輕鬆的製作出全屏網站。

主要功能

  • 支援滑鼠滾動
  • 支援前進後退和鍵盤控制
  • 多個回撥函式
  • 支援手機、平板觸控事件
  • 支援 CSS3 動畫
  • 支援視窗縮放
  • 視窗縮放時自動調整
  • 可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等等

相容性

fullPage.js 支援 IE8+ 及其他現代瀏覽器。

配置

1、選項

選項 型別 預設值 說明
verticalCentered 字串 true 內容是否垂直居中
resize 布林值 false 字型是否隨著視窗縮放而縮放
slidesColor 函式 設定背景顏色
anchors 陣列 定義錨鏈接
scrollingSpeed 整數 700 滾動速度,單位為毫秒
easing 字串 easeInQuart 滾動動畫方式
menu 布林值 false 繫結選單,設定的相關屬性與 anchors 的值對應後,選單可以控制滾動
navigation 布林值 false 是否顯示專案導航
navigationPosition 字串 right 專案導航的位置,可選 left 或 right
navigationColor 字串 #000 專案導航的顏色
navigationTooltips 陣列 專案導航的 tip
slidesNavigation 布林值 false 是否顯示左右滑塊的專案導航
slidesNavPosition 字串 bottom 左右滑塊的專案導航的位置,可選 top 或 bottom
controlArrowColor 字串 #fff 左右滑塊的箭頭的背景顏色
loopBottom 布林值 false 滾動到最底部後是否滾回頂部
loopTop 布林值 false 滾動到最頂部後是否滾底部
loopHorizontal 布林值 true 左右滑塊是否迴圈滑動
autoScrolling 布林值 true 是否使用外掛的滾動方式,如果選擇 false,則會出現瀏覽器自帶的滾動條
scrollOverflow 布林值 false 內容超過滿屏後是否顯示滾動條
css3 布林值 false 是否使用 CSS3 transforms 滾動
paddingTop 字串 0 與頂部的距離
paddingBottom 字串 0 與底部距離
fixedElements 字串
normalScrollElements
keyboardScrolling 布林值 true 是否使用鍵盤方向鍵導航
touchSensitivity 整數 5
continuousVertical 布林值 false 是否迴圈滾動,與 loopTop 及 loopBottom 不相容
animateAnchor 布林值 true
normalScrollElementTouchThreshold 整數 5

2、方法

名稱 說明
moveSectionUp() 向上滾動
moveSectionDown() 向下滾動
moveTo(section, slide) 滾動到
moveSlideRight() slide 向右滾動
moveSlideLeft() slide 向左滾動
setAutoScrolling() 設定頁面滾動方式,設定為 true 時自動滾動
setAllowScrolling() 新增或刪除滑鼠滾輪/觸控板控制
setKeyboardScrolling() 新增或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒為單位的滾動速度

3、回撥函式

名稱 說明
afterLoad 滾動到某一屏後的回撥函式,接收 anchorLink 和 index 兩個引數,anchorLink 是錨鏈接的名稱,index 是序號,從1開始計算
onLeave 滾動前的回撥函式,接收 index、nextIndex 和 direction 3個引數:
index 是離開的“頁面”的序號,從1開始計算;
nextIndex 是滾動到的“頁面”的序號,從1開始計算;
direction 判斷往上滾動還是往下滾動,值是 up 或 down。
afterRender 頁面結構生成後的回撥函式,或者說頁面初始化完成後的回撥函式
afterSlideLoad 滾動到某一水平滑塊後的回撥函式,與 afterLoad 類似,接收 anchorLink、index、slideIndex、direction 4個引數
onSlideLeave 某一水平滑塊滾動前的回撥函式,與 onLeave 類似,接收 anchorLink、index、slideIndex、direction 4個引數

本人寫的小例子附上:

<html>
<head>
	<title>FullPage.js 功能小測試</title>
<link href="//cdn.bootcss.com/fullPage.js/2.7.8/jquery.fullPage.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.bootcss.com/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<style type="text/css">
body {
	color: #FFFFFF;
	font-size: 26px;
	font-weight: 800;
}

.section {
	text-align: center;
	font: 50px "Microsoft Yahei";
	color: #fff;
}

.section p {
	position: relative;
	display:none
}

#menu {
    left: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 150px;
    z-index: 70;
}

#menu li {
    width:200px;
    font-size: 14px;
    margin: 15px 0;
	padding:20px 0;
}

#menu .active a {
    background-color: #333;
    color: #fff;
}
#menu a {
    background-color: #fff;
    color: #333;
    float: left;
    padding: 10px 20px;
    text-decoration: none;
}
</style>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">第一頁</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二頁</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三頁</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四頁</a></li>
</ul>
<div id="fullpage">
    <div class="section" data-anchor="page1">
    	<h3>第一屏</h3>
    	<p>這是FullPage.js 第一屏簡介</p>
    </div>
    <div class="section" data-anchor="page2">
    	<h3>第二屏</h3>
    	<p>這是FullPage.js 第二屏簡介</p>
    </div>
    <div class="section" data-anchor="page3">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section" data-anchor="page4">
    	<h3>第四屏</h3>
    	<p>這是FullPage.js 第四屏簡介</p>
    </div>
</div>

</body>
</html>

js 部分:

$(function(){
    $('#fullpage').fullpage({
    	
    	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],//設定背景顏色
    	verticalCentered: true,								//設定section中的內容是否垂直居中
    	resize:			  true,								//字型是否隨著視窗縮放而縮放
    	scrollingSpeed: '700',								//滾動的毫秒數
    	easing: 'easeInOutBounce',							//滑動動畫      http://jqueryui.com/easing/
    	
    	anchors:[ 'page1', 'page2' , 'page3', 'page4' ],
    	menu: '#menu',										//加超連結跳到對應的 section
    	
    	navigation: false,									//上下滑塊
    	navigationPosition: 'left',							//上下滑塊的專案導航位置
        showActiveTooltip:	false,							//是否顯示上下滑塊的專案導航 title
    	navigationTooltips: [ '1', '2', '3', '4' ],			//上下滑塊的專案導航  title
    	
        slidesNavigation: 	true,							//是否顯示左右滑塊的專案導航
        slidesNavPosition: 'bottom',						//左右滑塊的專案導航的位置,可選 top 或 bottom
        controlArrowColor: '#ccc',							//左右滑塊箭頭的顏色
        loopHorizontal:		false,							//左右滑塊是否迴圈滑動
        
        scrollBar: 	false,									//是否顯示瀏覽器的滾動條
        loopBottom:	false, 									//滾動到最底部後是否滾回頂部
        loopTop:	false,									//滾動到最頂部後是否滾底部
        
        
        autoScrolling: true,								//是否使用外掛的滾動方式      false-則會出現瀏覽器自帶的滾動條
        paddingTop:	'100',									// 設定與頂部的距離
        paddingBottom: '100',								// 設定與底部的距離
        
        continuousVertical: true,   						//是否迴圈滾動整版頁面
        keyboardScrolling: 	false,							//是否鍵盤控制翻頁
        animateAnchor:		true,							
        
        //滾動到某一屏後的回撥函式
    	afterLoad:function( afterLoad , index  ){
    		switch( index )
    		{
    			case 1:
    				$( 'div.section:eq(0)' ).find( 'p' ).fadeIn( 2000 );
    			break;
    			case 2:
    				$( 'div.section:eq(1)' ).find( 'p' ).fadeIn( 1000 );
    			break;
    			case 3:
    				//$( 'div.section:eq(2)' ).find( 'div.slide' ).fadeIn( 3000 );
    			break;
    			case 4:
    				$( 'div.section:eq(3)' ).find( 'p' ).fadeIn( 3000 );
    			break;
    		}
    	},
    	//滾動某一屏前的回撥函式
    	onLeave:function( index , direction ){
    		switch( index )
    		{
    			case 1:
    				$( 'div.section:eq(0)' ).find( 'p' ).fadeOut( 100 );
    			break;
    			case 2:
    				$( 'div.section:eq(1)' ).find( 'p' ).fadeIn( 100 );
    			break;
    			case 3:
    				//$( 'div.section:eq(2)' ).find( 'div.slide' ).fadeIn( 3000 );
    			break;
    			case 4:
    				$( 'div.section:eq(3)' ).find( 'p' ).fadeIn( 100 );
    			break;
    		}
    	},
    	
    });
    
    setInterval(function(){
    	
        $.fn.fullpage.setScrollingSpeed( 2000 );		// 定義以毫秒為單位的滾動速度
        
        //$.fn.fullpage.moveSlideLeft();				//slide 向左滾動
        $.fn.fullpage.moveSlideRight();					//slide 向右滾動
        
      	//$.fn.fullpage.moveSectionUp();				//設定頁面向上滾動
        $.fn.fullpage.moveSectionDown();				//設定頁面向下滾動
        
        
    }, 3000);
    
    $.fn.fullpage.setAutoScrolling( true );				// 設定頁面滾動方式,設定為 true 時自動滾動
});


類似外掛:

            pagePiling.js

       XSwitch.js