jquery-fullpage插件

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......

 

實用拓展：

Move.js插件：CSS3動畫的JavaScript插件

官網：http://jquer.in/css3-jquery-plugins/move-js/

Example：http://visionmedia.github.io/move.js/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation