成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

liangdas / 2615人閱讀

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

new FScroll({})

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

參數(shù)

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

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

第三個(gè)參數(shù), 在els對象中傳入一個(gè)dom數(shù)組對象，其中第一個(gè)參數(shù)表示滾動(dòng)的父容器，后邊依次傳入子元素，可以為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",    //開啟豎屏滾動(dòng)模式  橫屏滾動(dòng)則 mode: "scrollX"
            transition: ".7s ease",?。瘽L屏過渡效果?。梢允÷?，默認(rèn)啟用內(nèi)置過渡效果）
            els: {　　　　　　　　　　?。瘽L動(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: {　　　　　　　?。摪粹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://m.hztianpu.com/yun/107666.html

相關(guān)文章

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

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

    fanux 評論0 收藏0

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

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

    Rocko 評論0 收藏0

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

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

    stdying 評論0 收藏0

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

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

    MockingBird 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<