關于一個折疊滾屏的js插件

liangdas 發布于2019-08-26 11:50 / 2543人閱讀

摘要：是一款折疊滾動插件，可以用于軸和軸的折疊滾屏，同時兼容手機和端，另外支持圓點導航和軸滾屏模式下的左右翻屏按鈕。第二個參數滾屏過渡動畫，第一個為過渡時間，第二個為過度曲線，不傳入則默認為。

foldScroll

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

X軸滾動demo地址--https://tls1234.github.io/fol...

html 結構

！！必須設定每項 z-index的值

用法 ?

只需要new一個FScroll()對象

new FScroll({})

然后傳入一個Object對象，里邊包含一些配置參數

參數

第一個參數 mode ,scrollY 表示豎屏滾動，scrollX 表示橫屏滾動。 ?

第二個參數 transition, 滾屏過渡動畫，第一個為過渡時間，第二個為過度曲線，不傳入則默認為 ".7s ease" 。

第三個參數, 在els對象中傳入一個dom數組對象，其中第一個參數表示滾動的父容器，后邊依次傳入子元素，可以為CSS選擇器(字符串)或者dom節點。

第四個參數，nav對象，是否開啟導航圓點，如果不開啟則省略此參數
　　　　dom 導航圓點dom節點，可以為css選擇器(字符串)或者dom節點
　　　　navColor 導航圓點顏色
　　　　selectNavColor 導航圓點被選中后的顏色

第五個參數為翻頁按鈕，，如不開啟則省略此參數
　　　　dom 傳入翻頁按鈕dom節點，同樣可以為css選擇器或者dom節點

var scroll = new FScroll(
        {
            mode: "scrollY",    //開啟豎屏滾動模式  橫屏滾動則 mode: "scrollX"
            transition: ".7s ease",　／／滾屏過渡效果　（可以省略，默認啟用內置過渡效果）
            els: {　　　　　　　　　　　／／滾動相關元素節點
                dom: [
                ".wrapper",　　　／／滾動的父容器
                ".div1",　　　　　／／子節點
                ".div2",
                ".div3",
                ".div4",
                ".div5"
                ]
            },
            nav: {　　　　　　　　　　　／／導航圓點 ，如果不需要導航則省略此參數
                dom: [　　　　　　／／導航圓點元素
                ".li1",　　　
                ".li2",
                ".li3",
                ".li4",
                ".li5"
                ],
                navColor: "",　　／／導航圓點顏色 
                selectNavColor: "#e6e6e6"　　／／導航圓點被選中后的顏色 
            },
            countBtn: {　　　　　　　　／／翻頁按鈕 ，如果不需要翻頁按鈕則省略此參數
                dom: [".less-btn", ".add-btn"]　　／／翻頁按鈕dom節點
            }
        })

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107666.html

寫了一個折疊滾屏插件

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

fanux 2019-08-22 16:12 評論0 收藏0
fullpage.js最后一屏不滿一屏時，滾動方式

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

Rocko 2019-08-30 13:54 評論0 收藏0
fullpage.js最后一屏不滿一屏時，滾動方式

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

stdying 2019-08-26 11:38 評論0 收藏0
fullpage.js最后一屏不滿一屏時，滾動方式

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

MockingBird 2019-08-01 18:33 評論0 收藏0