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