單頁切屏效果的原理

前言

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


原理

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


實現過程中的注意事項:

  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

(完)

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