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);
