關於一個摺疊滾屏的js插件

foldScroll

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

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

 

html 結構

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

<ul class="wrapper">
   <li class="div1" style="background:#FF8C00;z-index:50"></li>
   <li class="div2" style="background:#FF6347;z-index:40"></li>
   <li class="div3" style="background:#FFA07A;z-index:30"></li>
   <li class="div4" style="background:#F08080;z-index:20"></li>
   <li class="div5" style="background:#CD5C5C;z-index:10"></li>
</ul>
<ul class="nav">
   <li class="li1"></li>
   <li class="li2"></li>
   <li class="li3"></li>
   <li class="li4"></li>
   <li class="li5"></li>
</ul>
<p class="less-btn"></p>
<p class="add-btn"></p>

用法  

只須要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...