fullpage 全屏插件

全屏滾動(dòng)效果，原生js也很好實(shí)現(xiàn)，主要是用 mousewheel ?鼠標(biāo)滾輪滾動(dòng)事件， 來(lái)判斷上滾動(dòng)還是下滾動(dòng)，之后設(shè)置每次滾動(dòng)的高度為屏幕的高度即可。但是，雖然效果簡(jiǎn)單，但是兼容性很差，要做很多兼容處理及比較麻煩啦！（了解一下，有興趣的同學(xué)可以研究一下）

fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠幫你很方便、很輕松的制作出全屏網(wǎng)站。

github 官網(wǎng) ? ? https://github.com/alvarotrigo/fullPage.js

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

支持鼠標(biāo)滾動(dòng)

支持前進(jìn)后退和鍵盤控制

多個(gè)回調(diào)函數(shù)

支持手機(jī)、平板觸摸事件

支持 CSS3 動(dòng)畫

支持窗口縮放

窗口縮放時(shí)自動(dòng)調(diào)整

可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對(duì)齊方式等等

引用文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 是必須的，用于 easing 參數(shù)，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

HTML 結(jié)構(gòu)

<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入口函數(shù)

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

fullpage 詳細(xì)參數(shù)

fullPage.js 方法

注意方法的使用時(shí)需要添加：

$.fn.fullpage ? 比如

$.fn.fullpage.moveTo(1);

回調(diào)函數(shù)

jQuery Easing.js 插件

介紹：easing是jquery的一個(gè)插件，使用它可以創(chuàng)建更加絢麗的動(dòng)畫效果。

環(huán)境：因?yàn)閑asing是jQuery的插件，所以必須是在引入jquery之后再引入它

如果只想要簡(jiǎn)單的寫法就用

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

easing:格式為json,{duration:持續(xù)時(shí)間,easing:過渡效果,complete:成功后的回調(diào)函數(shù)}
$(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