La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. En este artículo, demostraremos el efecto Múltiple . Este efecto se usa para aplicar el efecto dado a múltiples elementos en la página. También podemos ajustar la velocidad y el retraso de los efectos.
Sintaxis:
Effect.multiple( [element1, element2, element3, …], Effect, [options] )
o
Effect.multiple( element, Effect, [options] )
Opciones: este método tiene dos parámetros en el objeto de opciones como se describe a continuación:
- : Es un valor flotante que especifica la compensación de retardo para cada efecto en la lista de efectos. El valor predeterminado es 0,1 segundos.
- delay: Es un valor flotante que especifica el retraso de inicio de este efecto. El valor predeterminado es 0,0 segundos.
Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. En el que hemos escrito una pequeña función de JavaScript llamada método ShowEffect que utiliza el método Multiple de esta biblioteca. Los siguientes ejemplos demuestran el método.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the multiple effect with
// the delay parameter
new Effect.multiple(element,
Effect.Fade, {
delay: 3.0
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Multiple Effect</h2>
<button onclick="ShowEffect(
['geeks_1', 'geeks_2'])">
Click me to multiple
fade the lines!
</button>
<br><br>
<div id="geeks_1">
LINE ONE TO FADE
</div><br>
<div id="geeks_2">
LINE TWO TO FADE
</div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
// Using the multiple effect with
// the speed parameter
function ShowEffect(element) {
new Effect.multiple(element,
Effect.SwitchOff, {
speed: 1.0
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Multiple Effect</h2>
<button onclick="ShowEffect(
['geeks_1', 'geeks_2', 'geeks_3'])">
Click me to multiple fade the lines
</button>
<br><br>
<div id="geeks_1">
<div style="background-color: lightgreen;">
GeeksforGeeks
</div>
</div><br>
<div id="geeks_2">
<div style="background-color: orange;">
GeeksforGeeks
</div>
</div><br>
<div id="geeks_3">
<div style="background-color: lightblue;">
GeeksforGeeks
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA