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 Crecer . Este efecto se utiliza para hacer que el elemento crezca con una transición suave desde una dirección. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Grow( 'id_of_element', [options] )
o
Effect.Grow( element, [options] )
Opciones: este objeto de opciones tiene dos valores, como se mencionó anteriormente y se describe a continuación:
- dirección: este valor especifica el origen desde donde crece el elemento. Los valores pueden ser ‘arriba a la izquierda’, ‘arriba a la derecha’, ‘abajo a la izquierda’ o ‘abajo a la derecha’. El valor predeterminado es ‘centro’.
- duración: Este valor especifica la duración del efecto en segundos. El valor predeterminado es 1 segundo.
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 Grow 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 Effect.Grow() method
// on the element with no options
new Effect.Grow(element);
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Grow Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click to Show the Effect
</button>
<br />
<br />
<div id="geeks_1">
<div style="background-color: lightgreen;">
GeeksforGeeks
</div>
</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">
function ShowEffect(element) {
// Using the Effect.Grow() method
// on the element with the direction
// and duration specified
new Effect.Grow(element, {
direction: 'top-left',
duration: 5
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Grow Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click to Show the Effect
</button>
<br />
<br />
<div id="hideshow">
LINE TO GROW
</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