fullpage 全屏插件

全屏滚动效果，原生js也很好实现，主要是用 mousewheel  鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！（了解一下，有兴趣的同学可以研究一下）

fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。

github 官网     https://github.com/alvarotrigo/fullPage.js

中文演示地址   http://www.dowebok.com/demo/2014/77/  

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

引用文件

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

JavaScript入口函数

$(function(){
   $('#fullpage').fullpage();
});

fullpage 详细参数

fullPage.js 方法

注意方法的使用时需要添加：

$.fn.fullpage   比如

$.fn.fullpage.moveTo(1);

回调函数

jQuery Easing.js 插件

介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。

环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它

如果只想要简单的写法就用

$(".car").animate({"left": "150%"},  4000, "easeInElastic", function() {});

easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}
$(element).animate({
   height:500,
   width:600
   },{
   easing: 'easeInOutQuad',
   duration: 500,
   complete: function(){}
});

1. linear

2. swing

3. easeInQuad

4. easeOutQuad

5. easeInOutQuad

6. easeInCubic

7. easeOutCubic

8. easeInOutCubic

9. easeInQuart

10. easeOutQuart

11. easeInOutQuart

12. easeInQuint

13. easeOutQuint

14. easeInOutQuint

15. easeInExpo

16. easeOutExpo

17. easeInOutExpo

18. easeInSine

19. easeOutSine

20. easeInOutSine

21. easeInCirc

22. easeOutCirc

23. easeInOutCirc

24. easeInElastic

25. easeOutElastic

26. easeInOutElastic

27. easeInBack

28. easeOutBack

29. easeInOutBack

30. easeInBounce

31. easeOutBounce

32. easeInOutBounce