单页切屏效果的原理

前言

在实际的开发过程中碰到的单页切屏效果，稍作改动，就可以做成如下优雅的幻灯片效果了。

原理

文档结构如下，监测鼠标滚轮的滚动事件，相应的执行切屏动画。

实现过程中的注意事项：

1. 鼠标滚轮事件的兼容性问题：
   W3C并没有对鼠标滚轮事件进行规范，各浏览器厂商封装了不同的实现方法，事件属性也不一样，FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现，所以需要做一下兼容处理（详见下面的js关键代码的截图）

   

2. 切屏幻灯片效果是通过“background-attachment: fixed;”实现的，如果不想要幻灯片效果，只是单纯的切屏，把“background-attachment: fixed;”去掉即可。

代码

html：

css：

js关键代码：

滚轮事件：

切屏函数：

参考

1. http://www.webfront-js.com/articaldetail/17.html
2. http://www.webfront-js.com/articaldetail/18.html

附件

完整代码见我的github：
https://github.com/pluscai/my-fullpage#my-fullpage

（完）