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