foldScroll
foldScroll 是一款折叠滚动插件, 可以用于 Y 轴和 X 轴的折叠滚屏, 同时兼容手机和 pc 端, 另外支持圆点导航和 X 轴滚屏模式下的左右翻屏按钮
插件地址 https://github.com/tls1234/foldScroll
预览地址
Y 轴滚屏
X 轴滚屏
html 结构
- <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( )对象
然后传入一个 Object 对象, 里边包含一些配置参数
参数
第一个参数 scrollY 和 scrollX , 二者只能选一个, scrollY 表示竖屏滚动, scrollX 表示横屏滚动
第二个参数 transition, 滚屏过渡动画, 第一个为过渡时间, 第二个为过度曲线, 不传入则默认为 '.7s ease'
第三个参数, 在 els 对象中传入一个 dom 数组对象, 其中第一个参数表示滚动的父容器, 后边依次传入子元素, 可以为 CSS 选择器 (字符串) 或者 dom 节点
第四个参数, nav 对象, 是否开启导航圆点, 默认为不开启, 如果不开启请不要填写 nav 对象
open 开启导航圆点
dom 导航圆点 dom 节点 , 可以为 css 选择器 (字符串) 或者 dom 节点
navColor 导航圆点颜色
selectNavColor 导航圆点被选中后的颜色
第五个参数为翻页按钮, 默认为不开启, 如不开启请不要填写此项
open 是否开启
dom 传入翻页按钮 dom 节点, 同样可以为 css 选择器或者 dom 节点
后面还会更新一些其它插件, 欢迎大家去 star github 地址 https://github.com/tls1234/foldScroll
来源: http://www.qdfuns.com/article/41878/2dedf5a1e9ac2ed5fd15711dca86c11a.html