成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于一個(gè)折疊滾屏的js插件

liangdas / 2559人閱讀

摘要：是一款折疊滾動(dòng)插件，可以用于軸和軸的折疊滾屏，同時(shí)兼容手機(jī)和端，另外支持圓點(diǎn)導(dǎo)航和軸滾屏模式下的左右翻屏按鈕。第二個(gè)參數(shù)滾屏過(guò)渡動(dòng)畫(huà)，第一個(gè)為過(guò)渡時(shí)間，第二個(gè)為過(guò)度曲線，不傳入則默認(rèn)為。

foldScroll

foldScroll 是一款折疊滾動(dòng)插件，可以用于Y軸和X軸的折疊滾屏，同時(shí)兼容手機(jī)和pc端，另外支持圓點(diǎn)導(dǎo)航和X軸滾屏模式下的左右翻屏按鈕。
Y軸滾動(dòng)demo地址--https://tls1234.github.io/fol...

X軸滾動(dòng)demo地址--https://tls1234.github.io/fol...

?

html 結(jié)構(gòu)

??！ 必須設(shè)定每項(xiàng) z-index的值

    
   
  • 
   
  • 
   
  • 
   
  • 
   
  • 



    
   
  • 
   
  • 
   
  • 
   
  • 
   
  •
用法 ?

只需要new一個(gè)FScroll()對(duì)象

new FScroll({})

然后傳入一個(gè)Object對(duì)象，里邊包含一些配置參數(shù)

參數(shù)

第一個(gè)參數(shù) mode ,scrollY 表示豎屏滾動(dòng)，scrollX 表示橫屏滾動(dòng)。 ?

第二個(gè)參數(shù) transition, 滾屏過(guò)渡動(dòng)畫(huà)，第一個(gè)為過(guò)渡時(shí)間， 第二個(gè)為過(guò)度曲線， 不傳入則默認(rèn)為 ".7s ease" 。

第三個(gè)參數(shù), 在els對(duì)象中傳入一個(gè)dom數(shù)組對(duì)象，其中第一個(gè)參數(shù)表示滾動(dòng)的父容器，后邊依次傳入子元素，可以為CSS選擇器(字符串)或者dom節(jié)點(diǎn)。

第四個(gè)參數(shù)，nav對(duì)象，是否開(kāi)啟導(dǎo)航圓點(diǎn)，如果不開(kāi)啟則省略此參數(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ù)為翻頁(yè)按鈕，，如不開(kāi)啟則省略此參數(shù)
　　　　dom 傳入翻頁(yè)按鈕dom節(jié)點(diǎn)，同樣可以為css選擇器或者dom節(jié)點(diǎn)

var scroll = new FScroll(
        {
            mode: "scrollY",    //開(kāi)啟豎屏滾動(dòng)模式  橫屏滾動(dòng)則 mode: "scrollX"
            transition: ".7s ease",　／／滾屏過(guò)渡效果?。梢允÷?，默認(rèn)啟用內(nèi)置過(guò)渡效果）
            els: {　　　　　　　　　　　／／滾動(dòng)相關(guān)元素節(jié)點(diǎn)
                dom: [
                ".wrapper",　　?。瘽L動(dòng)的父容器
                ".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: {　　　　　　　?。?yè)按鈕 ，如果不需要翻頁(yè)按鈕則省略此參數(shù)
                dom: [".less-btn", ".add-btn"]　　／／翻頁(yè)按鈕dom節(jié)點(diǎn)
            }
        })

歡迎star https://github.com/tls1234/fo...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107666.html

相關(guān)文章

  • 寫(xiě)了一個(gè)折疊滾屏插件

    摘要：是一款折疊滾動(dòng)插件，可以用于軸和軸的折疊滾屏，同時(shí)兼容手機(jī)和端，另外支持圓點(diǎn)導(dǎo)航和軸滾屏模式下的左右翻屏按鈕。第二個(gè)參數(shù)滾屏過(guò)渡動(dòng)畫(huà)，第一個(gè)為過(guò)渡時(shí)間，第二個(gè)為過(guò)度曲線，不傳入則默認(rèn)為。 foldScroll foldScroll 是一款折疊滾動(dòng)插件，可以用于Y軸和X軸的折疊滾屏，同時(shí)兼容手機(jī)和pc端，另外支持圓點(diǎn)導(dǎo)航和X軸滾屏模式下的左右翻屏按鈕。 Y軸滾動(dòng)demo地址--http...

    fanux 評(píng)論0 收藏0

  • fullpage.js最后一屏不滿一屏?xí)r，滾動(dòng)方式

    摘要：根據(jù)要實(shí)現(xiàn)的效果，要做的就是讓緊挨著這一屏不垂直居中到這一屏的時(shí)候，再往下的滾動(dòng)距離就不能是一屏了必須是的高度。 這兩天公司網(wǎng)頁(yè)改版用到fullpage.js這個(gè)滾屏插件，頁(yè)面內(nèi)容整屏的滾動(dòng)，不成問(wèn)題，各種設(shè)置在網(wǎng)上也都有文檔。而我遇到的問(wèn)題就是，頁(yè)面內(nèi)容不滿屏的時(shí)候，和上面的內(nèi)容放一塊就太擠，單獨(dú)放一屏就太空，好尷尬的說(shuō)showImg(https://segmentfault.com...

    Rocko 評(píng)論0 收藏0

  • fullpage.js最后一屏不滿一屏?xí)r，滾動(dòng)方式

    摘要：根據(jù)要實(shí)現(xiàn)的效果，要做的就是讓緊挨著這一屏不垂直居中到這一屏的時(shí)候，再往下的滾動(dòng)距離就不能是一屏了必須是的高度。 這兩天公司網(wǎng)頁(yè)改版用到fullpage.js這個(gè)滾屏插件，頁(yè)面內(nèi)容整屏的滾動(dòng)，不成問(wèn)題，各種設(shè)置在網(wǎng)上也都有文檔。而我遇到的問(wèn)題就是，頁(yè)面內(nèi)容不滿屏的時(shí)候，和上面的內(nèi)容放一塊就太擠，單獨(dú)放一屏就太空，好尷尬的說(shuō)showImg(https://segmentfault.com...

    stdying 評(píng)論0 收藏0

  • fullpage.js最后一屏不滿一屏?xí)r，滾動(dòng)方式

    摘要：根據(jù)要實(shí)現(xiàn)的效果，要做的就是讓緊挨著這一屏不垂直居中到這一屏的時(shí)候，再往下的滾動(dòng)距離就不能是一屏了必須是的高度。 這兩天公司網(wǎng)頁(yè)改版用到fullpage.js這個(gè)滾屏插件，頁(yè)面內(nèi)容整屏的滾動(dòng)，不成問(wèn)題，各種設(shè)置在網(wǎng)上也都有文檔。而我遇到的問(wèn)題就是，頁(yè)面內(nèi)容不滿屏的時(shí)候，和上面的內(nèi)容放一塊就太擠，單獨(dú)放一屏就太空，好尷尬的說(shuō)showImg(https://segmentfault.com...

    MockingBird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<