multiscroll.js – jQuery左右垂直反向滚动插件-BFW插件库

multiscroll.js – jQuery左右垂直反向滚动插件

multiscroll.js – jQuery左右垂直反向滚动插件,multiscroll.js 和 fullpage.js 有点类似，也是页面全屏滚动，只不过 fullpage.js 是整屏滚动，而 multiscroll.js 是分成左右两个面板，垂直反向滚动合在一起。

属性：

名称	类型	默认值	说明
verticalCentered	布尔值	true	内容垂直居中
scrollingSpeed	整数	700	过度时间，即页面滚动动画的时间，以毫秒为单位
sectionsColor	数组	[]	每一屏的背景颜色
anchors	数组	[]	定义每一屏的命名锚记
easing	字符串	‘easeInQuart’	过度方式
loopTop	布尔值	false	循环滚动（在第一屏时滚动到最后一屏）
loopBottom	布尔值	false	循环滚动（在最后一屏时滚动到第一屏）
css3	布尔值	false	选择使用 JavaScript 或 CSS3 transforms 滚动页面，使用 CSS3 transforms 能够更好的支持移动和平板设备。如果设置为 true，但浏览器不支持 CSS3 transforms，则回退使用 JavaScript
paddingTop	整数	0	顶部填充，你可以放置一个固定的头部（查看演示）
paddingBottom	整数	0	底部填充，你可以放置一个固定的底部（查看演示）
normalScrollElements	null/字符串	null
keyboardScrolling	布尔值	true	使用键盘导航
touchSensitivity	整数	5	定义浏览器窗口的宽度/高度的百分比，让用户滑动多少距离可以滚动到下一屏
menu	布尔值/字符串	false	绑定一个菜单
navigation	布尔值	false	显示圆点导航
navigationPosition	字符串	‘right’	圆点导航的位置，可选 left 或 right
navigationTooltips	数组	[]	圆点导航的提示信息

方法：

名称	说明
moveSectionUp()	向上滚动一屏
moveSectionDown()	向下滚动一屏
moveTo()	滚动到某一屏，比如1）滚动到某一个命名锚记：$.fn.multiscroll.moveTo(‘firstSection’);2）滚动到第3屏： $.fn.multiscroll.moveTo(3);
setAllowScrolling
setKeyboardScrolling	开启/关闭键盘控制
setScrollingSpeed	设置动画过度时间

回调

函数	说明
afterLoad	滚动后的回调函数
onLeave	滚动前的回调函数
afterRender	页面初始化后的回调函数
afterResize	浏览器大小调整后的回调函数

使用方式：

第一步引入bfwone，加载依赖项jquery及easing

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery.easing.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.multiscroll.min", "jquery.multiscroll"], function() {
                $('#bfw-Wrap').multiscroll({
                    sectionsColor: ['#1bbc9b', '#de564b', '#f9b755']
                });
            });
        });
    </script>
    <style>
        .ms-section {
            font: 50px "Microsoft Yahei";
            color: #fff;
            text-align: center;
            *padding-top: 45%;
        }
    </style>
</head>
<body>
    <div class="bfw-Wrap">
        <div class="ms-left">
            <div class="ms-section">
                左1
            </div>
            <div class="ms-section">
                左2
            </div>
            <div class="ms-section">
                左3
            </div>
        </div>
        <div class="ms-right">
            <div class="ms-section">
                右1
            </div>
            <div class="ms-section">
                右2
            </div>
            <div class="ms-section">
                右3
            </div>
        </div>
    </div>
</body>
</html>