[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) }) ```