資訊專欄INFORMATION COLUMN
摘要：是一款折疊滾動插件，可以用于軸和軸的折疊滾屏，同時兼容手機和端，另外支持圓點導(dǎo)航和軸滾屏模式下的左右翻屏按鈕。第二個參數(shù)滾屏過渡動畫，第一個為過渡時間，第二個為過度曲線，不傳入則默認為。
foldScroll
foldScroll 是一款折疊滾動插件，可以用于Y軸和X軸的折疊滾屏，同時兼容手機和pc端，另外支持圓點導(dǎo)航和X軸滾屏模式下的左右翻屏按鈕。
Y軸滾動demo地址--https://tls1234.github.io/fol...
X軸滾動demo地址--https://tls1234.github.io/fol...
?
html 結(jié)構(gòu)?。?必須設(shè)定每項 z-index的值
只需要new一個FScroll()對象
new FScroll({})
然后傳入一個Object對象，里邊包含一些配置參數(shù)
參數(shù)第一個參數(shù) mode ,scrollY 表示豎屏滾動，scrollX 表示橫屏滾動。 ?
第二個參數(shù) transition, 滾屏過渡動畫，第一個為過渡時間， 第二個為過度曲線， 不傳入則默認為 ".7s ease" 。
第三個參數(shù), 在els對象中傳入一個dom數(shù)組對象，其中第一個參數(shù)表示滾動的父容器，后邊依次傳入子元素，可以為CSS選擇器(字符串)或者dom節(jié)點。
第四個參數(shù)，nav對象，是否開啟導(dǎo)航圓點，如果不開啟則省略此參數(shù)
dom 導(dǎo)航圓點dom節(jié)點 ，可以為css選擇器(字符串)或者dom節(jié)點
navColor 導(dǎo)航圓點顏色
selectNavColor 導(dǎo)航圓點被選中后的顏色
第五個參數(shù)為翻頁按鈕，，如不開啟則省略此參數(shù)
dom 傳入翻頁按鈕dom節(jié)點，同樣可以為css選擇器或者dom節(jié)點
var scroll = new FScroll(
{
mode: "scrollY", //開啟豎屏滾動模式 橫屏滾動則 mode: "scrollX"
transition: ".7s ease", ／／滾屏過渡效果?。梢允÷?，默認啟用內(nèi)置過渡效果）
els: { ／／滾動相關(guān)元素節(jié)點
dom: [
".wrapper", ?。瘽L動的父容器
".div1", ／／子節(jié)點
".div2",
".div3",
".div4",
".div5"
]
},
nav: { ?。瘜?dǎo)航圓點 ，如果不需要導(dǎo)航則省略此參數(shù)
dom: [ ／／導(dǎo)航圓點元素
".li1",
".li2",
".li3",
".li4",
".li5"
],
navColor: "", ?。瘜?dǎo)航圓點顏色
selectNavColor: "#e6e6e6" ／／導(dǎo)航圓點被選中后的顏色
},
countBtn: { ?。摪粹o ，如果不需要翻頁按鈕則省略此參數(shù)
dom: [".less-btn", ".add-btn"] ?。摪粹odom節(jié)點
}
})
歡迎star https://github.com/tls1234/fo...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94144.html
摘要：是一款折疊滾動插件，可以用于軸和軸的折疊滾屏，同時兼容手機和端，另外支持圓點導(dǎo)航和軸滾屏模式下的左右翻屏按鈕。第二個參數(shù)滾屏過渡動畫，第一個為過渡時間，第二個為過度曲線，不傳入則默認為。 foldScroll foldScroll 是一款折疊滾動插件，可以用于Y軸和X軸的折疊滾屏，同時兼容手機和pc端，另外支持圓點導(dǎo)航和X軸滾屏模式下的左右翻屏按鈕。 Y軸滾動demo地址--http...
閱讀 2810·2021-11-18 10:02
閱讀 3526·2021-09-22 15:50
閱讀 2428·2021-09-06 15:02
閱讀 3643·2019-08-29 16:34
閱讀 1810·2019-08-29 13:49
閱讀 1345·2019-08-29 13:29
閱讀 3743·2019-08-28 18:08
閱讀 3062·2019-08-26 11:52
