multiscroll.js – jQuery左右垂直反向滚动插件
简介
也许你已经知道 fullpage.js 是一个非常优秀插件,很多优秀的公司都在使用它,比如猪八戒、网易等等。今天我们再介绍一款该插件作者开发的另一款插件——multiscroll.js。multiscroll.js 和 fullpage.js 有点类似,也是页面全屏滚动,只不过 fullpage.js 是整屏滚动,而 multiscroll.js 是分成左右两个面板,垂直反向滚动合在一起。
因为效果和 fullpage.js 类似,且出自同一作者,所有这两款插件的一些属性和方法类似或相同,详细请查看页面下方的配置。
浏览器兼容
IE8+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
其实也可以兼容 IE6、IE7,因为最核心的滚动是支持的,只是有一些效果不支持,比如垂直居中。如果做一些兼容处理,也可以很好的兼容。
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.multiscroll.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/jquery.multiscroll.min.js"></script>
2、HTML
<div class="dowebok-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>
3、JavaScript
$(function(){ $('#dowebok-Wrap').multiscroll(); });
配置
属性
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 浏览器大小调整后的回调函数 |