jquery-plugin-multiscroll.js-优快云博客

本文介绍如何使用Multiscroll.js实现平滑的页面上下转场效果。通过配置文件和HTML结构设置，可以轻松创建多屏滚动网站，并定义各屏背景颜色。文章提供了具体的HTML与JavaScript代码实例。

用法整理：

- 下载地址：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>

转载于:https://www.cnblogs.com/cyany/p/7252264.html