码迷,mamicode.com
首页 > Web开发 > 详细

jquery-fullpage插件

时间:2016-04-17 16:13:58      阅读:1063      评论:0      收藏:0      [点我收藏+]

标签:

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>

GitHub源码:https://github.com/liuqiuchen/fullpage


.section.active 设置显示的屏

图片懒加载:
jQuery图片延迟加载插件Lazy Load

更多查看fullpage api......

jquery-fullpage插件

标签:

原文地址:http://www.cnblogs.com/lqcdsns/p/5401107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!