前言
在實際的開發過程中碰到的單頁切屏效果,稍作改動,就可以做成如下優雅的幻燈片效果了。
原理
文檔結構如下,監測鼠標滾輪的滾動事件,相應的執行切屏動畫。
實現過程中的注意事項:
- 鼠標滾輪事件的兼容性問題:
W3C并沒有對鼠標滾輪事件進行規范,各瀏覽器廠商封裝了不同的實現方法,事件屬性也不一樣,FireFox用了一個私有實現DOMMouseScroll。其他瀏覽器都是用mousewheel實現,所以需要做一下兼容處理(詳見下面的js關鍵代碼的截圖)
- 切屏幻燈片效果是通過“background-attachment: fixed;”實現的,如果不想要幻燈片效果,只是單純的切屏,把“background-attachment: fixed;”去掉即可。
代碼
html:
css:
js關鍵代碼:
滾輪事件:
切屏函數:
參考
附件
完整代碼見我的github:
https://github.com/pluscai/my-fullpage#my-fullpage
(完)