fullPage 实现全屏滚动
生活随笔
收集整理的這篇文章主要介紹了
fullPage 实现全屏滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考demo網址：
http://www.dowebok.com/demo/2014/77/
api說明地址：
http://www.dowebok.com/77.html
一、基礎演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js — 基本演示_dowebok</title> <link rel="stylesheet" href="css/jquery.fullPage.css"> <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']}); }); </script> </head><body><div id="dowebok"><div class="section"><h3>第一屏</h3><p>fullPage.js — 基本演示</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><p>這是最后一屏</p></div> </div></body> </html>二、背景演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js — 背景演示_dowebok</title> <link rel="stylesheet" href="css/jquery.fullPage.css"> <style> .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 src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function(){$('#dowebok').fullpage(); }); </script> </head><body><div id="dowebok"><div class="section section1"></div><div class="section section2"></div><div class="section section3"></div><div class="section section4"></div> </div></body> </html>三、循環滾動?；卣{函數演示。增加動畫效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js — 回調函數演示_dowebok</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-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script> <script> $(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],continuousVertical: true , //滾動到第四屏后，繼續滾動返回第一屏afterLoad: function(anchorLink, index){if(index == 2){$('.section2').find('p').delay(500).animate({left: '0'}, 1500, 'easeOutExpo');}if(index == 3){$('.section3').find('p').delay(500).animate({bottom: '0'}, 1500, 'easeOutExpo');}if(index == 4){$('.section4').find('p').fadeIn(2000);}},onLeave: function(index, direction){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);}}}); }); </script> </head><body><div id="dowebok"><div class="section section1"><h3>第一屏</h3><p>fullPage.js — 回調函數演示</p></div><div class="section section2"><h3>第二屏</h3><p>滾動到第二屏后的回調函數執行的效果</p></div><div class="section section3"><h3>第三屏</h3><p>滾動到第三屏后的回調函數執行的效果</p></div><div class="section section4"><h3>第四屏</h3><p>滾動到第四屏后的回調函數執行的效果</p></div> </div></body> </html>四、綁定菜單演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>fullPage.js — 綁定菜單演示_dowebok</title> <link rel="stylesheet" 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-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],anchors: ['page1', 'page2', 'page3', 'page4'],menu: '#menu'}); }); </script> </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="dowebok"><div class="section"><h3>第一屏</h3><p>fullPage.js — 綁定菜單演示</p></div><div class="section"><h3>第二屏</h3><p>請查看左上角，點擊可以控制</p></div><div class="section"><h3>第三屏</h3><p>綁定的菜單沒有默認的樣式，你需要自行編寫</p></div><div class="section"><h3>第四屏</h3><p>這是最后一屏</p></div> </div></body> </html>
五、自動滾動。項目導航。循環滾動(moveSectionDown)，縱向循環。
六、自動滾動 (moveSlideRight)，第二屏橫向循環。滾動到底部后，是否滾回頂部。
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"> <title>fullPage.js演示-slide自動滾動_dowebok</title><link rel="stylesheet" href="css/jquery.fullPage.css"><style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style> </head><body> <div id="dowebok"><div class="section"><h3>第一屏</h3><p>請滾動到第二屏查看</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-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function(){$('#dowebok').fullpage({sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],loopBottom: true //滾動到最底部后是否滾回頂部});setInterval(function(){$.fn.fullpage.moveSlideRight();}, 3000); }); </script></body> </html>七、響應式(屏幕寬度小于1024關閉全屏滾動，改為自帶滾動條)
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"> <title>fullPage.js演示-響應式_dowebok</title><link rel="stylesheet" href="css/jquery.fullPage.css"><style> .section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;} </style> </head><body> <div id="dowebok"><div class="section"><p>根據可視區域大小啟用/關閉全屏滾動效果</p></div><div class="section"><p>如果可視區寬度小于1024，則關閉全屏滾動效果，使用自帶的滾動條</p></div><div class="section"><p>請試著調整瀏覽器大小并查看滾動條是否出現</p></div><div class="section"><p>第四屏</p></div> </div><script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script> $(function(){$('#dowebok').fullpage({sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']});$(window).resize(function(){autoScrolling();});function autoScrolling(){var $ww = $(window).width();if($ww < 1024){$.fn.fullpage.setAutoScrolling(false);} else {$.fn.fullpage.setAutoScrolling(true);}}autoScrolling(); }); </script></body> </html>八、 iPhone 5C演示。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>fullPage.js — iPhone 5C演示_dowebok</title> <link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/css/jquery.fullPage.css"> <style> body{color:#333;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif} h1{font-size:5em;font-family:arial,helvetica;margin:0;padding:0} h2{font-size:2em;margin:0 0 18px 0;font-family:arial,helvetica} img{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out} .section{text-align:center;overflow:hidden} .wrap{width:1180px;height:100%;margin-left:auto;margin-right:auto;position:relative} .box{text-align:left;color:#808080;font-size:1.2em;line-height:1.6em} #section0{padding:60px 0} #section0 img{height:100%;margin:40px 0 0 0} #section1 img{position:absolute;left:40px;top:100px} #section1 .box{position:absolute;top:50%;left:50%;margin-top:-192px;margin-left:89px;width:395px;z-index:1} #section1 .imgsContainer{display:block;position:absolute;z-index:1;top:42%;left:58%;margin-top:-325px;margin-left:-747px;width:800px;height:696px} #section1 img{height:100%} @media all and (min-width:620px) and (max-width:800px){#section1 .imgsContainer{margin-top:-278px;margin-left:-685px;width:647px;height:563px} }@media all and (max-width:620px){#section1 .imgsContainer{margin-top:-208px;margin-left:-516px;width:534px;height:464px} }#iphone2{z-index:10} #iphone2.active{-webkit-transform:translate3d(-134px,0px,0px);-moz-transform:translate3d(-134px,0px,0px);-ms-transform:translate3d(-134px,0px,0px);transform:translate3d(-134px,0px,0px)} #iphone3{z-index:12} #iphone3.active{-webkit-transform:translate3d(213px,0px,0px);-moz-transform:translate3d(213px,0px,0px);-ms-transform:translate3d(213px,0px,0px);transform:translate3d(213px,0px,0px)} #iphone4{z-index:11;left:140px} #iphone4.active{-webkit-transform:translate3d(548px,0px,0px);-moz-transform:translate3d(548px,0px,0px);-ms-transform:translate3d(548px,0px,0px);transform:translate3d(548px,0px,0px)} #section2 img{position:absolute} #section2 .imgsContainer,#staticImg .imgsContainer,#section3 .imgsContainer{position:absolute;z-index:1;left:50%;display:block;margin-top:-288px;margin-left:-636px;width:0;height:0;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out} #section2.moveUp .imgsContainer{top:50%} #section2.moveDown .imgsContainer,#staticImg .imgsContainer{top:90%} #section2.active .imgsContainer{top:50%} #section2 .box{top:22%;left:42%;position:absolute;width:582px} #iphone-yellow{top:-35px;left:-222px} #iphone-red{top:-194px;left:106px} #iphone-blue{top:320px;left:448px} #iphone-green{left:106px;position:absolute} #staticImg{display:block;position:absolute;z-index:1;top:200%;left:0;width:100%;min-width:980px;height:100%;-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out} #staticImg.moveDown{top:300%} #staticImg.moveDown .imgsContainer{top:50%} #staticImg.moveDown img{top:155px} #staticImg.active .imgsContainer{top:50%} #staticImg.active img{top:487px} #section3 .imgsContainer{top:50%} #section3 img{top:155px;left:455px;position:absolute} #section3 .box{text-align:center;margin:10% 0 0 0} #infoMenu.whiteLinks li:nth-child(1) a,#infoMenu.whiteLinks li:nth-child(2) a,#infoMenu.whiteLinks li:nth-child(3) a{color:#fff} #infoMenu{font-family:arial,helvetica} .fullPage-tooltip{color:#AAA} #fullPage-nav span,.fullPage-slidesNav span{border-color:#AAA} #fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#AAA} </style> <script src="js/jquery-1.8.3.min.js"></script> <script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="http://www.dowebok.com/demo/2014/77/js/jquery.fullPage.min.js"></script> <script type="text/javascript">$(document).ready(function() {$.fn.fullpage({'verticalCentered': false,'anchors': ['page1', 'page2', 'page3', 'page4'],'css3': true,'slidesColor': ['#F0F2F4', '#fff', '#fff', '#fff'],'navigation': true,'navigationPosition': 'right','navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],'afterLoad': function(anchorLink, index){if(index == 2){$('#iphone3, #iphone2, #iphone4').addClass('active');}$('#infoMenu').toggleClass('whiteLinks', index ==4);},'onLeave': function(index, direction){if (index == 3 && direction == 'down'){$('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');}else if(index == 3 && direction == 'up'){$('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');}$('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));$('#staticImg').toggleClass('moveDown', index == 3 && direction == 'down'); },afterRender: function(){$('#infoMenu').appendTo('body');$('#githubLink, .twitter-share-button').appendTo('body');}});}); </script> </head><body><div id="staticImg"><div class="imgsContainer"><img src="http://idowebok.u.qiniudn.com/77/iphone-green.png" alt="iphone" id="iphone-green" /></div> </div><div class="section " id="section0"><h1>fullPage.js — iPhone 5C演示</h1><img src="http://idowebok.u.qiniudn.com/77/iphone1.jpg" alt="iphone" /> </div><div class="section" id="section1"><div class="wrap"><div class="imgsContainer"><img src="http://idowebok.u.qiniudn.com/77/iphone2.png" alt="iphone" id="iphone2" /><img src="http://idowebok.u.qiniudn.com/77/iphone3.png" alt="iphone" id="iphone3" /><img src="http://idowebok.u.qiniudn.com/77/iphone4.png" alt="iphone" id="iphone4" /></div><div class="box"><h2>A powerful plugin</h2><strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.</div></div> </div><div class="section moveDown" id="section2"><div class="wrap"><div class="imgsContainer"><img src="http://idowebok.u.qiniudn.com/77/iphone-yellow.png" alt="iphone" id="iphone-yellow" /><img src="http://idowebok.u.qiniudn.com/77/iphone-red.png" alt="iphone" id="iphone-red" /><img src="http://idowebok.u.qiniudn.com/77/iphone-blue.png" alt="iphone" id="iphone-blue" /></div><div class="box"><h2>Amazing stuff</h2>Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable. </div></div> </div> <div class="section moveDown" id="section3"><div class="wrap"><div class="box"><h2>Just a demo</h2>This is, of course, just a demo. I didn't want to spend much time on it.Don't expect it to work perfectly in all kind of screens.It has been designed to work on 1180px width or over on modern browsers with CSS3.</div></div><div class="imgsContainer"><img src="http://idowebok.u.qiniudn.com/77/iphone-two.png" alt="iphone" id="iphone-two" /></div> </div></body> </html>總結
以上是生活随笔為你收集整理的fullPage 实现全屏滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu1052 Tian Ji -- T
- 下一篇： 沟通的法宝！三季人法则