jQuery插件fullPage.js實(shí)現(xiàn)全屏滾動(dòng)效果
更新時(shí)間：2016年12月02日 08:30:07 作者：秦卿
這篇文章主要為大家詳細(xì)介紹了jQuery全屏滾動(dòng)插件fullPage.js的使用方法，可制作全屏滾動(dòng)網(wǎng)頁,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了全屏滾動(dòng)插件fullPage.js的具體使用方法，供大家參考，具體內(nèi)容如下
0.01 基本演示 的HTML 布局 以及js 代碼
//需要連接 連接的三個(gè)文件
<link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件
<script src="js/jquery-1.8.3.min.js"></script> //jQuery 1.8.3的版本
<script src="js/jquery.fullPage.min.js"></script> //fullPage插件的壓縮版本
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改動(dòng) 設(shè)置的是網(wǎng)頁中的文字 <無關(guān)緊要>
</style>
<script>
$(function(){
$('#dowebok').fullpage({
//fullpage 比較重要 設(shè)置的是插件的基本設(shè)置 后面的
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
//sectionsColor 當(dāng)沒有背景圖片的時(shí)候這個(gè)就是設(shè)置背景顏色的否則就是空白 數(shù)組的形式 中間以逗號(hào)隔開 顏色不管是十六進(jìn)制還是英文單詞都需要用單引號(hào)包著
});
});
</script>
<div id="dowebok"> //綁定的大盒子 設(shè)置滾動(dòng)的盒子
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 基本演示</p>
</div>
<div class="section"> //滾動(dòng)的第二屏幕 如果在里面添加div和slide的樣式就可以增加橫向 點(diǎn)擊
<div class="slide"><h3>第二屏的第一屏</h3></div>
<div class="slide"><h3>第二屏的第二屏</h3></div>
<div class="slide"><h3>第二屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最后一屏</p>
</div>
</div>
0.02 插入背景圖片演示 的HTML 布局 以及js 代碼 <需要鏈接的文件都是一樣的>
<style> //需要注意的是這里 沒有設(shè)置顏色 而是在css中設(shè)置的背景圖片0
.section1 { background: url(images/1.jpg) 50%;}
.section2 { background: url(images/2.jpg) 50%;}
.section3 { background: url(images/3.jpg) 50%;}
.section4 { background: url(images/4.jpg) 50%;}
</style>
<script>
$(function(){
$('#dowebok').fullpage(); //找到大盒子 設(shè)置fullpage全屏滾動(dòng)
});
</script>
<div id="dowebok">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
</div>
0.03 循環(huán)演示 html 布局以及js代碼 <需要鏈接的文件都是一樣的>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上面一樣 sectionsColor 是設(shè)置每一屏的顏色 必須用逗號(hào)隔開 單引號(hào)包著
continuousVertical: false, //設(shè)置是否滑到底層再往下滾動(dòng)是第一張圖 設(shè)置true是執(zhí)行此操作 設(shè)置false是不執(zhí)行 默認(rèn)不執(zhí)行 不執(zhí)行就不設(shè)置
});
});
</script>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 循環(huán)演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最后一屏了，繼續(xù)往下滾返回第一屏</p>
</div>
</div>
0.04 回調(diào)函數(shù)演示
<title>fullPage.js — 回調(diào)函數(shù)演示</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section2 p { position: relative; left: -120%;}
.section3 p { position: relative; bottom: -120%;}
.section4 p { display: none;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//設(shè)置背景顏色
afterLoad: function(anchorLink, index){
//滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號(hào)，從1開始計(jì)算
if(index == 2){
$('.section2').find('p').delay(500).animate({
//find('p') 搜索所有段落中的后代 p 元素
//delay(500)其中參數(shù)為延時(shí)值，它的單位是毫秒
//animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫
left: '0'
}, 1500, 'easeOutExpo'); //jQuery Easing 動(dòng)畫效果擴(kuò)展
}
if(index == 3){
$('.section3').find('p').delay(500).animate({
bottom: '0'
}, 1500, 'easeOutExpo');
}
if(index == 4){
$('.section4').find('p').fadeIn(2000);
//fadeIn() 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）
}
},
onLeave: function(index, direction){
//滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)：index 是離開的“頁面”的序號(hào)，從1開始計(jì)算；
//nextIndex 是滾動(dòng)到的“頁面”的序號(hào)，從1開始計(jì)算；
//direction 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down。
if(index == '2'){
$('.section2').find('p').delay(500).animate({
left: '-120%'
}, 1500, 'easeOutExpo');
}
if(index == '3'){
$('.section3').find('p').delay(500).animate({
bottom: '-120%'
}, 1500, 'easeOutExpo');
}
if(index == '4'){
$('.section4').find('p').fadeOut(2000);
//fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）
}
},
continuousVertical: false,
// 是否循環(huán)滾動(dòng)，與 loopTop 及 loopBottom 不兼容
});
});
</script>
<div id="dowebok">
<div class="section section1">
<h3>第一屏</h3>
<p>fullPage.js — 回調(diào)函數(shù)演示</p>
</div>
<div class="section section2">
<h3>第二屏</h3>
<p>滾動(dòng)到第二屏后的回調(diào)函數(shù)執(zhí)行的效果</p>
</div>
<div class="section section3">
<h3>第三屏</h3>
<p>滾動(dòng)到第三屏后的回調(diào)函數(shù)執(zhí)行的效果</p>
</div>
<div class="section section4">
<h3>第四屏</h3>
<p>滾動(dòng)到第四屏后的回調(diào)函數(shù)執(zhí)行的效果</p>
</div>
</div>
0.05 綁定菜單方法
<title>fullPage.js — 綁定菜單演示_dowebok</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style>
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//設(shè)置顏色參數(shù)
anchors: ['page1', 'page2', 'page3', 'page4'],
//定義錨鏈接
menu: '#menu'
//綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對(duì)應(yīng)后，菜單可以控制滾動(dòng)
});
});
</script>
<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="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 綁定菜單演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>請(qǐng)查看左上角，點(diǎn)擊可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>綁定的菜單沒有默認(rèn)的樣式，你需要自行編寫</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最后一屏</p>
</div>
</div>
0.06 項(xiàng)目導(dǎo)航演示
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//設(shè)置顏色屬性
'navigation': true,
//是否顯示項(xiàng)目導(dǎo)航 默認(rèn)值是false 需要設(shè)置true
});
});
</script>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 項(xiàng)目導(dǎo)航演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>請(qǐng)查看右邊的圓圈</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>圓圈還可以設(shè)置位置，顏色，加上 tip，點(diǎn)擊可以控制</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>這是最后一屏</p>
</div>
</div>
0.07 自動(dòng)循環(huán)滾動(dòng)
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//設(shè)置顏色屬性
continuousVertical: true
//設(shè)置是否循環(huán)滾動(dòng)，與 loopTop 及 loopBottom 不兼容 默認(rèn)是false
});
setInterval(function(){ //定時(shí)器 三秒一執(zhí)行
$.fn.fullpage.moveSectionDown(); //向下滾動(dòng)
}, 3000);
});
</script>
0.08 設(shè)置橫屏的自動(dòng)播放
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>請(qǐng)滾動(dòng)到第二屏查看</p>
</div>
<div class="section">
<div class="slide"><h3>第二屏的第一屏</h3></div>
<div class="slide"><h3>第二屏的第二屏</h3></div>
<div class="slide"><h3>第二屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//設(shè)置顏色屬性
loopBottom: true
//loopBottom 布爾值 false 滾動(dòng)到最底部后是否滾回頂部
});
setInterval(function(){
$.fn.fullpage.moveSlideRight();
//moveSlideRight() slide 向右滾動(dòng)
// moveSlideLeft() slide 向左滾動(dòng)
}, 3000);
});
</script>
0.09 判斷當(dāng)前瀏覽器的寬度 小于多少的時(shí)候關(guān)閉滾動(dòng)
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
<div class="section">
<p>根據(jù)可視區(qū)域大小啟用/關(guān)閉全屏滾動(dòng)效果</p>
</div>
<div class="section">
<p>如果可視區(qū)寬度小于1024，則關(guān)閉全屏滾動(dòng)效果，使用自帶的滾動(dòng)條</p>
</div>
<div class="section">
<p>請(qǐng)?jiān)囍{(diào)整瀏覽器大小并查看滾動(dòng)條是否出現(xiàn)</p>
</div>
<div class="section">
<p>第四屏</p>
</div>
</div>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
//設(shè)置顏色屬性
});
$(window).resize(function(){
//當(dāng)調(diào)整瀏覽器窗口的大小時(shí)，發(fā)生 resize 事件。resize() 方法觸發(fā) resize 事件，或規(guī)定當(dāng)發(fā)生 resize 事件時(shí)運(yùn)行的函數(shù)
autoScrolling();
//true 是否使用插件的滾動(dòng)方式，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條
});
function autoScrolling(){
var $ww = $(window).width();
if($ww < 1024){
$.fn.fullpage.setAutoScrolling(false);
//setAutoScrolling() 設(shè)置頁面滾動(dòng)方式，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng) 設(shè)置為false不滾動(dòng)
} else {
$.fn.fullpage.setAutoScrolling(true);
}
}
autoScrolling();
});
</script>
fullPage.js 是 jQuery 的一個(gè)插件，主要功能是制作出全屏網(wǎng)站 fullPage插件的兼容性是兼容IE7瀏覽器往上 其余主流瀏覽器就不描敘了 fullpage插件支持以下操作
1、插件可以使用鼠標(biāo)滑輪進(jìn)行滾動(dòng)
2、當(dāng)豎屏的時(shí)候支持鍵盤的上下箭頭滾動(dòng) 橫屏對(duì)照可以使用的是左右箭頭
3、能使用 多個(gè)回調(diào)函數(shù) 制作出動(dòng)畫效果 但是需要涉及到j(luò)Query ui的插件連接<在下面有>
4、fullPage 同樣也是 支持 觸摸事件 如可觸摸式筆記本 平板 手機(jī)
5、能在屬性操作時(shí) 使用css3動(dòng)畫 但是要注意 css3的兼容性
6、能夠自適應(yīng) 屏幕的大小
7、可以設(shè)置頁面的滾動(dòng)寬度 以及背景顏色 是否循環(huán)播放 可以時(shí)候回調(diào)函數(shù) 文本可以設(shè)置樣式
使用 fullPage中我引用的文件具體如下所示 <必須注意鏈接順序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件> 注意！ 所需鏈接文件可像我留言索要 也可尋找自行下載
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> //這是設(shè)置關(guān)于插件的樣式 需要鏈接 <script src="js/jquery.min.js"></script> // jQuery 1.8.3版本 <script src="js/jquery-ui.js"></script> // JQuery ui 版本1.12.1 <可選>需要設(shè)置Easing參數(shù)時(shí) 必須鏈接 否則出錯(cuò) <script src="js/jquery.fullPage.js"></script> // 最后是此次的正主 fullPage插件
配置
1、選項(xiàng)
2、方法
3、回調(diào)函數(shù)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery操作radio,checkbox,select表單操作實(shí)現(xiàn)代碼
Jquery操作radio,checkbox,select表單操作實(shí)現(xiàn)代碼，需要用jquery操作表單的朋友可以參考下。2010-04-04
下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問題探討
使用jquery做了一個(gè)項(xiàng)目，下拉列表選擇項(xiàng)變化時(shí)，獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問題在本文將為大家介紹下2013-09-09
基于jquery-resizable創(chuàng)建可調(diào)整大小的表(table)格
本文介紹如何基于jquery-resizable實(shí)現(xiàn)可調(diào)整表格(table)列寬的代碼,需要的朋友可以參考下2023-06-06
正好項(xiàng)目中準(zhǔn)備使用thickbox，于是干脆拋棄prototype.js，看起jquery.js了。JQuery確實(shí)不錯(cuò)，體積比Prototype小了許多，而且使用起來更方便更靈活。有人說Prototype像JAVA，正統(tǒng)；而JQuery像Ruby，靈活，更趨于OOP。2009-10-10
jQuery實(shí)現(xiàn)下拉加載功能實(shí)例代碼
本文通過一段實(shí)例代碼給大家介紹jquery實(shí)現(xiàn)下拉加載功能，代碼簡(jiǎn)單易懂，需要的朋友參考下吧2016-04-04
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實(shí)現(xiàn)針對(duì)IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)UI設(shè)置固定日期選擇特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
這篇文章主要介紹了基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides的相關(guān)資料,需要的朋友可以參考下2015-09-09
jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法
這篇文章主要介紹了jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法,涉及jQuery簡(jiǎn)單獲取節(jié)點(diǎn)及attr與text方法讀取元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery加密密碼到cookie的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家分享了jquery 加密密碼到cookie的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-04-04