jQuery proporciona el complemento multiscroll.js que ayuda a los programadores a crear páginas web divididas junto con múltiples paneles de desplazamiento vertical divididos.
Nota: descargue el complemento jQuery multiscroll en su carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código, como se muestra a continuación. Descargue el archivo «jquery.easings.min.js» . Descargar “ejemplos.css”
Incluya los archivos del complemento jQuery multiscroll.js:
<enlace href=”jquery.multiscroll.css” rel=”hoja de estilo” type=”text/css”/>
<enlace href=”examples.css” rel=”hoja de estilo” 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>
Ejemplo 1: En el siguiente ejemplo, se demuestra el complemento de desplazamiento múltiple que da como resultado el desplazamiento vertical dividido de las páginas. Algunas de las configuraciones de opciones básicas se realizan en la función jQuery del complemento de desplazamiento múltiple, como loopBottom: true , loopTop: true para el efecto de bucle. Otra opción como scrollingSpeed: 1000 está configurada para administrar los parámetros de velocidad. El programador puede configurar las opciones según los requisitos de la aplicación.
<!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>
Producción:
Ejemplo 2: En el siguiente ejemplo, el complemento multiscroll se demuestra con algunas configuraciones de opciones más como aceleración: ‘easeOutBack’ . Las secciones de encabezado y pie de página también están diseñadas en la parte CSS del código junto con la configuración de opciones de relleno en el código jQuery tal como se implementó.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA