fullPage.js-简单易用的jQuery全屏滚动插件
2016-01-03 适用版本:未知 所属类目:滚动插件
不知大家有没有见到过安装浏览器新版本时弹出的新版介绍页面,比如
猎豹浏览器新版本介绍,每个页面都能全屏展示,信息展示非常直接,交互效果顺滑,应用范围非常广泛,功能不多废话,大家看演示即可,有需要的朋友可以收藏一下。
献上几个截图:
使用方法:
引入文件:
<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>
<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<script src="js/jquery.slimscroll.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();
});
另外插件也提供了丰富的API和回调函数,这里是官方介绍:
https://github.com/alvarotrigo/fullPage.js
去淘宝购买