本文主要是介绍jQuery fullpage全屏的步骤及注意事项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
想要实现fullpage全屏滚动，需要以下几步：
第一步：引入样式文件以及js文件
<link rel="stylesheet" href="style/jquery.fullPage.css"/>
<link rel="stylesheet" href="style/style.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>我自己写的style样式表为
*{ margin:0; padding:0;}
ol, ul { list-style:none; }
a { text-decoration:none;color: #000; }
a:hover {}
img{border:0;display: block;}body{font-family: '微软雅黑', Arial; }
.clear{ clear: both;}
.blank10{ height: 10px;width: 100%;}
.blank20{ height: 20px;width: 100%;}
.blank30{ height: 30px;width: 100%;}
.index_body{width:100%;height:100%;overflow: hidden;}
.wrap{width:1150px;margin:0 auto;height:100%;}
.section { position: relative; overflow: hidden;}/*header_top*/
.header_top{ background: #f48472;height: 62px;width: 100%;position: absolute;left: 0;top: 0;z-index: 99;}/*section1*/
.container_01{ height: 100%;background: #5dc6ed;}/*section2*/
.container_02{ height: 100%;background: #14afcb;}/*section3*/
.container_03{ height: 100%;background: #74ddcd;}/*section4*/
.container_04{ height: 100%;background: #167b87;}
第二步：编写html
<body><div class="index_body"><div class="header_top"></div><div id="fullpage"><div class="section section1"><div class="container_01"><div class="wrap"></div></div> </div><!--section1--><div class="section section2"><div class="container_02"><div class="wrap"></div></div></div><!--section2--> <div class="section section3"><div class="container_03"><div class="wrap"></div></div></div><!--section3--> <div class="section section4"><div class="container_04"><div class="wrap"></div></div></div><!--section4--> </div></div>
</body>第三步：编写js命令
<script type="text/javascript">$(function () {if ($.browser.msie && $.browser.version < 10) {$('body').addClass('ltie10');}$("#fullpage").fullpage({verticalCentered: false,anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6'],navigation: true,navigationTooltips: ['', '', '', '', '', '']});});
</script>navigationTooltips: ['', '', '', '', '', '']这篇关于jQuery fullpage全屏的步骤及注意事项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
