multiscroll.js演示8种左右垂直滚动

来源:https://www.sucaihuo.com/js/1456.html 2017-03-12 22:10浏览(1049) 收藏

之前我们分享了一款鼠标滚动插件:fullpage.js,不知道的可以在素材火搜索下。今天这款强大的滚动插件叫multiscroll.js,试试鼠标滚动吧。
multiscroll.js演示8种左右垂直滚动
分类:图片代码 > 鼠标滚动 难易:中级
查看演示 下载资源 下载积分: 40 积分

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
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2