极客教程jQuery Multiscroll插件
jQuery提供的multiscroll.js插件可以帮助程序员创建分割的网页以及分割的多个垂直滚动的面板。
注意：请下载jQuery多卷轴插件到你的工作文件夹中，并在你的代码的头部部分包含所需的文件，如下图所示。下载 “jquery.easings.min.js “文件。下载 “examples.css “文件
包括jQuery multiscroll.js插件文件：
<link href=”jquery.multiscroll.css” rel=”stylesheet” type=”text/css”/>
<link href=”examples.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”jquery.easings.min.js”></script>
<script src=”jquery.multiscroll.js”></script>
例子1：在下面的例子中，演示了multiscroll插件，它可以实现页面的垂直分割滚动。一些基本的选项设置是在multiscroll插件的jQuery函数中完成的，如loopBottom : true, loopTop :true来实现循环效果。其他选项如scrollingSpeed : 1000是为了管理速度参数。程序员可以根据应用程序的要求来设置这些选项。
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset = utf-8" />
<title> jQuery Multiscroll Plugin</title>
<link rel="stylesheet" type="text/css"
href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easings.min.js">
</script>
<script type="text/javascript" src="jquery.multiscroll.js">
</script>
<script type="text/javascript">
(document).ready(function() {
('#containerDivID').multiscroll({
sectionsColor: ['#008000', '#32CD32', '#90EE90'],
anchors: ['php', 'mysql', 'jquery'],
menu: '#menu',
navigation: true,
navigationTooltips: ['php', 'mysql', 'jquery'],
loopBottom: true,
loopTop: true,
leftSelector: 'ms-left',
rightSelector: 'ms-right',
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<ul id="menu">
<li data-menuanchor="first">
<a href="#php">PHP slide</a></li>
<li data-menuanchor="second">
<a href="#mysql">MySQL slide</a></li>
<li data-menuanchor="third">
<a href="#jquery">jQuery slide</a></li>
</ul>
<div id="containerDivID">
<div class="ms-left">
<div class="ms-section" id="phpleftId">
<h1>PHP Left </h1>
</div>
<div class="ms-section" id="mysqlleftId">
<h1>MySQL Left </h1>
</div>
<div class="ms-section" id="jqueryleftId">
<h1>jQuery Left </h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="phprightId">
<h1>PHP Right </h1>
</div>
<div class="ms-section" id="mysqlrightId">
<h1>MySQL Right </h1>
</div>
<div class="ms-section" id="jqueryrightId">
<h1>jQuery Right</h1>
</div>
</div>
</div>
</body>
</html>
输出:
示例2：在下面的例子中，多卷轴插件展示了一些更多的选项设置，如easing : 'easeOutBack' 。页眉和页脚部分也是在CSS部分的代码中设计的，同时在jQuery代码中实现了padding选项设置。
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset = utf-8" />
<title> jQuery Multiscroll Plugin</title>
<link rel="stylesheet" type="text/css"
href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css"
href="examples.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easings.min.js">
</script>
<script type="text/javascript" src="jquery.multiscroll.js">
</script>
<script type="text/javascript">
(document).ready(function() {
('#containerDivID').multiscroll({
sectionsColor: ['#008000', '#32CD32', '#90EE90'],
anchors: ['php', 'mysql', 'jquery'],
menu: '#menu',
css3: true,
navigation: true,
navigationTooltips: ['php', 'mysql', 'jquery'],
easing: 'easeOutBack',
paddingTop: '100px',
paddingBottom: '100px'
});
});
</script>
<style>
#headerDivID,
#footerDivID {
position: fixed;
width: 100%;
height: 50px;
display: block;
text-align: center;
background: #808080;
z-index: 5;
color: #e9e9e9;
padding: 20px 0 0 0;
}
#headerDivID {
top: 0px;
}
#footerDivID {
bottom: 0px;
}
#menu {
position: fixed;
height: 50px;
z-index: 50;
width: 100%;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
margin: 10px;
color: #0000;
background-color: #808080;
background: rgba(255, 255, 255, 0.5);
-webkit-border-radius: 12px;
}
#menu li a {
text-decoration: none;
color: #000;
}
#menu li.active {
background-color: #696969;
background: rgba(255, 255, 255, 1.5);
color: #0000;
}
#menu li:hover {
background: rgba(255, 255, 255, 0.5);
}
#menu li.active a {
color: #0000;
}
#menu li.active a:hover {
color: #0000;
}
#menu li a,
#menu li.active a {
padding: 10px 15px;
display: block;
}
</style>
</head>
<body>
<div id="headerDivID">GeeksforGeeks</div>
<div id="footerDivID">footer@GeeksforGeeks</div>
<ul id="menu">
<li data-menuanchor="first"><a href="#php">
<b>PHP slide</b></a></li>
<li data-menuanchor="second"><a href="#mysql">
<b>MySQL slide</b></a></li>
<li data-menuanchor="third"><a href="#jquery">
<b>jQuery slide</b></a></li>
</ul>
<div id="containerDivID">
<div class="ms-left">
<div class="ms-section" id="phpleftId">
<h1>Left1 </h1>
</div>
<div class="ms-section" id="mysqlleftId">
<h1> Left2 </h1>
</div>
<div class="ms-section" id="jqueryleftId">
<h1> Left3 </h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="phprightId">
<h1>Right1 </h1>
</div>
<div class="ms-section" id="mysqlrightId">
<h1>MySQL Right2 </h1>
</div>
<div class="ms-section" id="jqueryrightId">
<h1>jQuery Right3</h1>
</div>
</div>
</div>
</body>
</html>
输出:
