(一)描述:fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站。
(二)功能:支持鼠标滚动;支持前进后退和键盘控制;多个回调函数;支持手机、平板触摸事件;支持 CSS3 动画;支持窗口缩放;窗口缩放时自动调整;可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。
(三)兼容性:支持 IE8+ 及其他现代浏览器。
(四)参考网站:http://www.smartisan.com/t1/#/design
(五)使用方法:
1、下载fullPage.js
下载地址:http://www.dowebok.com/77.html
2、引入js文件
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>fullPageDemo</title> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> </head>
3、引入CSS样式文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<body> <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> </body>
<style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style>
<script> $(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 'navigation': true, }); }); </script>
8、下载文件的使用
下载后的js压缩包,有index.html文件。打开后有基本演示和综合演示两种,可以根据自己网页需要的样式进行相关配置和修改,另外可以参考fullPage的配置文件设置参数。