jquery-fullpage插件

最新推荐文章于 2024-10-18 11:15:37 发布

weixin_30567471

最新推荐文章于 2024-10-18 11:15:37 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lqcdsns/p/5401107.html

本文介绍如何使用jqueryfullpage.js实现全屏滚动效果，并展示了基本的页面结构及配置方法。此外，还提供了添加幻灯片及使用Move.js插件进行CSS3动画扩展的示例。

jquery fullpage.js全屏滚动插件/jquery-easing插件

// 前端自动化工具安装插件

在页面引入：

1 <link rel="stylesheet" href="bower_components/fullpage.js/dist/jquery.fullpage.min.css"/>
2 <script src="bower_components/jquery/dist/jquery.min.js"></script>
3 <!-- 可选择的，支持更多的动画过渡效果 -->
4 <script src="bower_components/jquery-easing/jquery.easing.min.js"></script>
5 <script src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>

/******************************/

 1 <div id="fullpage">
 2     <div class="section">
 3         <h1>这是第一屏</h1>
 4     </div>
 5     <div class="section">
 6         <h1>这是第二屏</h1>
 7     </div>
 8     <div class="section">
 9         <h1>这是第三屏</h1>
10     </div>
11     <div class="section">
12         <h1>这是第四屏</h1>
13     </div>
14 </div>

/******************************/

1 $(function () {
2         $('#fullpage').fullpage();
3 });

/******************************/

1 <!-- 添加幻灯片 -->
2     <div class="section" style="background: lightblue;">
3         <div class="slide">slide1</div>
4         <div class="slide">slide2</div>
5         <div class="slide">slide3</div>
6         <div class="slide">slide4</div>
7     </div>