之前我们分享了一款鼠标滚动插件:fullpage.js,不知道的可以在素材火搜索下。今天这款强大的滚动插件叫multiscroll.js,试试鼠标滚动吧。
multiscroll.js基本用法
<div class="sucaihuo-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>
$('#sucaihuo-Wrap').multiscroll();
参数 | 描述 | 默认值 |
verticalCentered | 内容垂直居中 | true |
scrollingSpeed | 过度时间,即页面滚动动画的时间,以毫秒为单位 | 700 |
sectionsColor | 每一屏的背景颜色 | [] |
anchors | 定义每一屏的命名锚记 | [] |
easing | 过度方式 | ‘easeInQuart’ |
loopTop | 循环滚动(在第一屏时滚动到最后一屏) | false |
loopBottom | 循环滚动(在最后一屏时滚动到第一屏) | false |
css3 | 选择使用 JavaScript 或 CSS3 transforms 滚动页面,使用 CSS3 transforms 能够更好的支持移动和平板设备。如果设置为 true,但浏览器不支持 CSS3 transforms,则回退使用 JavaScript | false |
paddingTop | 顶部填充,你可以放置一个固定的头部(查看演示) | 0 |
paddingBottom | 底部填充,你可以放置一个固定的底部(查看演示) | 0 |
normalScrollElements |
||
keyboardScrolling | 使用键盘导航 | true |
touchSensitivity | 定义浏览器窗口的宽度/高度的百分比,让用户滑动多少距离可以滚动到下一屏 | 5 |
menu | 绑定一个菜单 | false |
navigation | 显示圆点导航 | false |
navigationPosition | 圆点导航的位置,可选 left 或 right | ‘right’ |
navigationTooltips | 圆点导航的提示信息 | [] |
moveSectionUp() | 向下滚动一屏 | moveSectionDown() |
moveTo() |
||
setKeyboardScrolling | 设置动画过度时间 | setScrollingSpeed |
afterLoad | 滚动前的回调函数 | onLeave |
afterRender | 浏览器大小调整后的回调函数 | afterResize |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791