本文實(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ù)組的形式 中間以逗號隔開 顏色不管是十六進(jìn)制還是英文單詞都需要用單引號包著 });});</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è)置每一屏的顏色 必須用逗號隔開 單引號包著 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 是序號，從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 是離開的“頁面”的序號，從1開始計(jì)算； //nextIndex 是滾動(dòng)到的“頁面”的序號，從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 的值對應(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>請查看左上角，點(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>請查看右邊的圓圈</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>請滾動(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>請?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) 橫屏對照可以使用的是左右箭頭
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
