[TOC] # 滾滾屏 ## 1。介紹 滾滾屏網站是時下**非常流行**的個人站或者企業站的制作風格，這個本身就是一種流行的趨勢，這個類型的網站大量運用**css3**中的**動畫模塊**技術，并且需要配合使用**jquery**。 **滾滾屏特點：** 每一屏都是鋪滿的 寬度和高度都是100%； 沒有滾動條； 滾動效果需要第三方庫的支持； 每一屏的元素都是定位實現的；一般都是**居中定位**，這個很重要; 所有的**入場動畫**和**出場動畫**都是依靠**CSS3** 實現的。 ## 2。滾動監聽 在滾滾屏項目中，我們需要滾動監聽鼠標滑動的滾動事件 ***** 滾滾屏插件MouseWheel的使用 ``` $(window).mousewheel(function(event) { console.log(event.deltaY); //向下滾動，這個值為-1，向上滾動這個值為1 }); 其中：deltaY: 在垂直方向滾動的增量; 增量正數向上滾動，增量負數 向下滾動 ``` ### 鼠標滾動屏幕的時候回有bug產生，一次性滾動好幾屏 **解決方法** 解決思路：做一個定時器，對要執行的代碼進行控制。每一次要執行代碼前，先停止前面的代碼的執行。 當鼠標滾動時，先清除之前的定時器(停止前面需要執行的代碼)，從而來執行1次現在需要還行的代碼。 ``` $(window).mousewheel(function(event) { clearTimeout(timer); timer = setTimeout(function(){ 鼠標滾動的時候發生的行為代碼； },100) }) ```