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)頁(yè),具有一定的參考價(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)頁(yè)中的文字 <無(wú)關(guān)緊要>
</style>
<script>
$(function(){
$('#dowebok').fullpage({
//fullpage 比較重要 設(shè)置的是插件的基本設(shè)置 后面的
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
//sectionsColor 當(dāng)沒(méi)有背景圖片的時(shí)候這個(gè)就是設(shè)置背景顏色的否則就是空白 數(shù)組的形式 中間以逗號(hào)隔開(kāi) 顏色不管是十六進(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> //需要注意的是這里 沒(méi)有設(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)隔開(kāi) 單引號(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開(kāi)始計(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() 方法逐漸改變被選元素的不透明度，從隱藏到可見(jiàn)（褪色效果）
}
},
onLeave: function(index, direction){
//滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)：index 是離開(kāi)的“頁(yè)面”的序號(hào)，從1開(kāi)始計(jì)算；
//nextIndex 是滾動(dòng)到的“頁(yè)面”的序號(hào)，從1開(kāi)始計(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() 方法逐漸改變被選元素的不透明度，從可見(jiàn)到隱藏（褪色效果）
}
},
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>綁定的菜單沒(méi)有默認(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è)置頁(yè)面滾動(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è)置頁(yè)面的滾動(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ù)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery序列化表單以及回調(diào)函數(shù)的使用示例
使用jQuery提供的表單序列化方法可以很好的解決JSP表單中一個(gè)個(gè)傳值的問(wèn)題，下面有個(gè)示例，大家可以參考下2014-07-07
jQuery LigerUI 是基于jQuery的一系列UI控件組合，簡(jiǎn)單而又強(qiáng)大，致力于快速打造Web前端界面解決方案。 因?yàn)槭乔岸丝丶?，跟服?wù)器無(wú)關(guān)，可以適合.net,jsp,php等等web服務(wù)器環(huán)境2012-01-01
存儲(chǔ)的是被拖動(dòng)的圖片的初始坐標(biāo)，為兩個(gè)變量設(shè)置被拖動(dòng)圖片的初始坐標(biāo)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
基于jQuery實(shí)現(xiàn)模擬頁(yè)面加載進(jìn)度條
進(jìn)度條的出現(xiàn)在于無(wú)法通過(guò)任何方法獲取整個(gè)頁(yè)面的大小和當(dāng)前加載了多少，所以只能用進(jìn)度條來(lái)模擬，接下來(lái)為大家介紹下實(shí)現(xiàn)方法，感興趣的朋友可以參考下哈2013-04-04
jquery 插件開(kāi)發(fā) extjs中的extend用法小結(jié)
在jquery中，extend其實(shí)在做插件時(shí)還是用的比較多的，今天同時(shí)小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下2013-01-01
jquery parent和parents的區(qū)別分析
從字面上不難看出parent是指取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。parents則是取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^(guò)一個(gè)可選的表達(dá)式進(jìn)行篩選2013-10-10
基于jQuery實(shí)現(xiàn)Tabs選項(xiàng)卡自定義插件
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Tabs選項(xiàng)卡自定義插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
今天換了個(gè)高版本的jquery，發(fā)現(xiàn)原先運(yùn)行正常的方法報(bào)錯(cuò)了，仔細(xì)搜查后得出jquery獲取radio 的方法如下2010-03-03
jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例
這篇文章主要給大家介紹了關(guān)于jquery中封裝函數(shù)傳遞當(dāng)前元素的方法，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
這篇文章分享一下easyui常用的兩種表單異步提交的方式,本文通過(guò)示例代碼給大家分享兩種方法,感興趣的朋友一起看看吧2023-12-12