單頁切屏效果的原理

前言

在實際的開發過程中碰到的單頁切屏效果，稍作改動，就可以做成如下優雅的幻燈片效果了。


原理

文檔結構如下，監測鼠標滾輪的滾動事件，相應的執行切屏動畫。


實現過程中的注意事項：

  1. 鼠標滾輪事件的兼容性問題：
    W3C并沒有對鼠標滾輪事件進行規范，各瀏覽器廠商封裝了不同的實現方法，事件屬性也不一樣，FireFox用了一個私有實現DOMMouseScroll。其他瀏覽器都是用mousewheel實現，所以需要做一下兼容處理（詳見下面的js關鍵代碼的截圖）
  1. 切屏幻燈片效果是通過“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

（完）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。