插件-全屏滾動(適用版本 PC 基礎(chǔ)版 標(biāo)準(zhǔn)版 PC 營銷版 手機(jī) 基礎(chǔ)版 標(biāo)準(zhǔn)版 手機(jī)營銷版)
案例地址 http://education-109.view.websiteonline.cn
可以自由設(shè)定滾屏個數(shù),每屏還支持單獨(dú)添加文本、圖片等模塊。滾屏管理支持鼠標(biāo)拖動調(diào)整順序。
支持設(shè)置是否顯示導(dǎo)航(右側(cè)小圓點(diǎn)),導(dǎo)航顏色,導(dǎo)航標(biāo)題顏色
支持設(shè)置是否自動滾屏,滾屏?xí)r間間隔。
支持鼠標(biāo)滾輪切換滾屏,鍵盤上下鍵頭切換滾屏
注:營銷版可用,使用此插件請注意頁面屬性設(shè)置取消顯示頁腳
全屏滾動
A.圖片顯示邏輯:
1.圖片使用自適應(yīng)縮放,保證圖片在逐個大小不同瀏覽設(shè)備顯示不會變形。
2.圖片也有高寬不等,那么當(dāng)圖片W>H時,以W作為參照,H自動,并根據(jù)瀏覽設(shè)備大小縮小或放大顯示圖片。
那么當(dāng)圖片W<H時,以H作為參照,W自動,并根據(jù)瀏覽設(shè)備大小縮小或放大顯示圖片。
3.由于圖片適應(yīng)縮放原理,使全屏圖片在各瀏覽設(shè)備顯示可以會不盡相同,但保證圖片會顯示最佳效果,不會變形。
B.內(nèi)容顯示邏輯:
1.如果瀏覽設(shè)備小于這個高度 其它模塊可以通過滾動條來顯示
但全屏插件 做的時候禁用了滾動條 所以才叫全屏的, 那當(dāng)瀏覽設(shè)備小于顯示所有模塊內(nèi)容的高度或?qū)挾任恢脮r,顯示不了全部內(nèi)容時, 超出瀏覽設(shè)備顯示范圍部分自然要隱藏。
2.全屏滾動拖入一個頁面中,全屏滾動就會浮在頁面上。如果內(nèi)容要顯示必須聚焦到全屏滾動每一屏。這樣切屏?xí)r分別顯示不同內(nèi)容。
C.支持邏輯:
不支持通欄固定顯示:全屏滾動是以切屏形式顯示每屏內(nèi)容。不存在那一屏內(nèi)容在每一屏都有,除非每一屏都加入相同內(nèi)容。再者兩者結(jié)構(gòu)一樣,不支持相互包含,包含后無法找到DOM節(jié)點(diǎn).
不支持通欄拖入:兩者結(jié)構(gòu)一樣,不支持相互包含,包含后