（一）描述：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">4、HTML页面
<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>5、CSS样式
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>6、JavaScript脚本
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
'navigation': true,
});
});
</script>7、运行代码即可
8、下载文件的使用
下载后的js压缩包，有index.html文件。打开后有基本演示和综合演示两种，可以根据自己网页需要的样式进行相关配置和修改，另外可以参考fullPage的配置文件设置参数。
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
