multiscroll.js是一个简单的插件来创建划分多滚动网站两个垂直滚动面板。
使用方法
引用相关文件
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
HTML
<div id="multiscroll">
<div class="ms-left">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
调用
$(document).ready(function() {
$('#multiscroll').multiscroll();
});
一个更复杂的初始化所有选项设置可以看起来像这样:
$(document).ready(function() {
$('#multiscroll').multiscroll{
'verticalCentered' : true,
'scrollingSpeed': 700,
'easing': 'easeInQuart',
'menu': true,
'sectionsColor': false,
'navigation': false,
'navigationPosition': 'right',
'navigationColor': '#000',
'navigationTooltips': [],
'loopBottom': false,
'loopTop': false,
'css3': false,
'paddingTop': 0,
'paddingBottom': 0,
'fixedElements': null,
'normalScrollElements': null,
'keyboardScrolling': true,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
});
});
方法
moveSectionUp()
$.fn.multiscroll.moveSectionUp();
moveSectionDown()
$.fn.multiscroll.moveSectionDown();
moveTo(section)
/*Scrolling to the section with the anchor link `firstSlide` */
$.fn.multiscroll.moveTo('firstSlide');
//Scrolling to the 3rd section in the site
$.fn.multiscroll.moveTo(3);
setAllowScrolling
$.fn.multiscroll.setAllowScrolling(false);
setKeyboardScrolling
$.fn.multiscroll.setKeyboardScrolling(false);
setScrollingSpeed
$.fn.multiscroll.setScrollingSpeed(700);