单页切屏效果的原理
前言
在实际的开发过程中碰到的单页切屏效果，稍作改动，就可以做成如下优雅的幻灯片效果了。
原理
文档结构如下，监测鼠标滚轮的滚动事件，相应的执行切屏动画。
实现过程中的注意事项：
-
鼠标滚轮事件的兼容性问题：
W3C并没有对鼠标滚轮事件进行规范，各浏览器厂商封装了不同的实现方法，事件属性也不一样，FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现，所以需要做一下兼容处理（详见下面的js关键代码的截图） 切屏幻灯片效果是通过“background-attachment: fixed;”实现的，如果不想要幻灯片效果，只是单纯的切屏，把“background-attachment: fixed;”去掉即可。
代码
html：
css：
js关键代码：
滚轮事件：
切屏函数：
参考
附件
完整代码见我的github：
https://github.com/pluscai/my-fullpage#my-fullpage
（完）