En este artículo, demostraremos el efecto de Shrink mediante el uso de una biblioteca de JavaScript llamada script.aculo.us que reduce un elemento en una dirección particular y lo oculta cuando se completa el efecto. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Shrink('id_of_element');
// o
Effect.Shrink('id_of_element', { duration: dur });
// o
Effect.Shrink('id_of_element', { direction:'direction' });
Parámetros:
- id_of_element: Elemento sobre el que se va a aplicar el efecto.
- duración: Duración que tarda este efecto.
- dirección: la dirección que se reducirá, por defecto es el centro.
Nota: Para usar esta biblioteca, se supone que debemos descargar o instalar la biblioteca y luego usarla en nuestros programas. Y para hacerlo puedes seguir este enlace http://script.aculo.us/downloads .
Acercarse:
- 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 ShrinkEffect() que utiliza el método Shrink() de esta biblioteca.
- Al hacer clic en Click Image to Shrink, verás el efecto claramente.
Ejemplo 1: para ver el efecto, primero instale la biblioteca y luego abra el siguiente programa en el entorno local.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="prototype.js"></script>
<script src=
"scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShrinkEffect(element) {
new Effect.Shrink(element, { duration: 4 });
}
</script>
</head>
<body>
<div id="myimage" onclick="ShrinkEffect(this);">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<h2>Click here to see the Shrink effect</h2>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, hemos utilizado la dirección del efecto como ‘abajo a la izquierda’ y también hemos agregado un botón para que aparezca el efecto.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="prototype.js"></script>
<script src=
"scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShrinkEffect(element) {
new Effect.Shrink(element, { duration: 1 });
}
</script>
</head>
<body>
<div id="myimage" onclick="ShrinkEffect(this);">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<br><br>
<button onclick="ShrinkEffect('myimage');">
Click here to see the effect
</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA