fullPage.js 是一个基于 jQuery 的插件,它能够帮你很方便、很轻松的制作出全屏网站。
https://github.com/alvarotrigo/fullPage.js
http://www.dowebok.com/demo/2014/77/
主要功能有:支持鼠标滚动,支持前进后退和键盘控制,多个回调函数,支持手机、平板触摸事件,支持 CSS3 动画,支持窗口缩放,窗口缩放时自动调整,可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
引用文件:
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --> <script src="js/jquery.easings.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>
JavaScript入口函数
$(function(){ $('#fullpage').fullpage(); });
fullpage详细参数
fullpage.js 方法
$.fn.fullpage 比如 $.fn.fullpage.moveTo(1);
回调函数