版权声明:部分来源于网络仅供学习交流 https://blog.csdn.net/Chad97/article/details/83068149
FullPage插件功能介绍
插件功能介绍
- 基于 jQuery 的插件,它能够帮你很方便、很轻松的制作出全屏网站。
- 支持鼠标滚动,支持前进后退和键盘控制,多个回调函数,
支持手机、平板触摸事件,支持 CSS3 动画,支持窗口缩放,窗口缩放时自动调整,
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。 - 参考文档:http://www.dowebok.com/demo/2014/77/
- 原理:window.onmousewheel = function(){ console.log(‘ok’) };
基本应用
- 引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>`
- html结构
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
- js初始化
$(function(){
$('#fullpage').fullpage();
});
配置
方法
回调函数
注
此版本是2.82版本,最新版本可能会有一些细节上的变动,详情请关注GitHub上的最新文档,
在后一篇博客我将用FullPage做一个全屏动画的活动页