关于一个折叠滚屏的js插件

liangdas 发布于2019-08-26 11:50 / 2784人阅读

摘要：是一款折叠滚动插件，可以用于轴和轴的折叠滚屏，同时兼容手机和端，另外支持圆点导航和轴滚屏模式下的左右翻屏按钮。第二个参数滚屏过渡动画，第一个为过渡时间，第二个为过度曲线，不传入则默认为。

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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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