總是能看見非常多廣告或者站點都是使用整屏滾動的效果，一直看著都心癢癢，想自己也實現乙個。近期剛學習到css3的動畫效果，所以嘗試使用css3做了乙個整屏切換。
實現思路與大眾方法相似。如圖
每乙個section就是一頁內容。它的大小充滿了螢幕（紅色區域）。乙個container由多個section構成，我們通過改變container的位置，來達到頁面切換的效果。
container向下走。頁面好像上移了，container向上走，頁面就下移了。
html結構例如以下：
lang="ch">
charset="utf-8">
name=」viewport」
content="width=device-width, user-scalable=no, initial-scale=1.0">
title>
body, html
body, html
#container, .section
#section0
#section1
#section2
#section3
style>
head>
id="container">
class="section"
id="section0">
div>
class="section"
id="section1">
div>
class="section"
id="section2">
div>
class="section"
id="section3">
div>
div>
body>
html>此時視窗裡僅僅顯示乙個頁面，我們給其加上滾動監聽。由於firefox和非firefox瀏覽器對滾動監聽支援不同。firefox瀏覽器向上滾動是-120，向下滾動是120，而其它瀏覽器向上是5，向下是-5，所以須要作推斷：
jquery實現整屏翻屏效果
實現整屏上下翻效果 靜態html 注意頭部載入的js，jquery庫，mousewheel.js已經實現的index.js jquery 如下 index.js var i 0 翻屏變數，初始第一屏 var s 0 該變數作用是滑鼠滑輪一直向下或者向上滑動時出現抖動現象 function else ...
jquery實現整屏翻屏效果
實現整屏上下翻效果 靜態html 注意頭部載入的js，jquery庫，mousewheel.js已經實現的index.js jquery 如下 index.js var i 0 翻屏變數，初始第一屏 var s 0 該變數作用是滑鼠滑輪一直向下或者向上滑動時出現抖動現象 function else ...
CSS3實現載入效果
預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...