實現(xiàn)原理:
1.采用css3 實現(xiàn) 滾動效果(過渡動畫)
2.采用 dom 事件監(jiān)聽 監(jiān)聽 過度動畫
3.無縫原理?
假如有 [a, b, c] 三個切換頁面,當(dāng)頁面滾動到c時霞赫,直接切回a 會出現(xiàn) :
第一種情況: 會出現(xiàn) c->b->a 回滾?
第二種情況: 到c后 斜筐,順切到 a 會出現(xiàn)閃屏效果
所以,我采用 把頁面變成 [c', a, b, c, a'] 這種形式 ,從 a開始 滾刘莹, 滾到c后阎毅,繼續(xù)滾到 a',
滾到a‘后瞬間,把頁面切到 a点弯,因為 a 和 a’ 一樣 所以 不會出現(xiàn) 閃屏效果扇调。 反方向原理一樣。
代碼效果地址
代碼如下:
布局:
布局
js: