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/
