jquery-plugin-multiscroll.js

Posted 2020-09-30 cyany_blue

用法整理：

- 下载地址：https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

- 文档地址：https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

实现的效果是页面上下转场效果

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
</ul>
	<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section" name="firstPage">Some section</div>
		<div class="ms-section" name="secondPage">Some section</div>
		<div class="ms-section" name="thirdPage">Some section</div>
	</div>
	<div class="ms-right">
		<div class="ms-section" name="firstPage">Some section</div>
		<div class="ms-section" name="secondPage">Some section</div>
		<div class="ms-section" name="thirdPage">Some section</div>
	</div>
</div>

　　

<script type="text/javascript">
	$(document).ready(function() {
	$(\'#multiscroll\').multiscroll({
			sectionsColor: [\'#f2f2f2\', \'#4BBFC3\', \'#7BAABE\', \'whitesmoke\', \'#000\'],
			anchors: [\'firstPage\', \'secondPage\',\'thirdPage\'],
	menu: \'#myMenu\'
		});
});
	
</script>

　　注意！！！需要下列文件

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script src="jquery.multiscroll.extensions.min.js"></script>