En este artículo, demostraremos el efecto Squish mediante el uso de una biblioteca de JavaScript llamada script.aculo.us que tiene una reducción suave del tamaño con la esquina izquierda inmóvil. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Squish('id_of_element');
// Or
Effect.Squish('id_of_element', { duration: dur });
Parámetros:
- id_of_element: Contiene el elemento sobre el que se va a aplicar el efecto.
- duración: Mantiene la duración que toma este efecto.
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 SquishEffect( ) que utiliza el método Squish() de esta biblioteca.
- Al hacer clic en Click Image to Squish, verá claramente el efecto.
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 type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function GFGSquish(el) {
new Effect.Squish(el, { duration: 4 });
}
</script>
</head>
<body>
<div id="myimage" onclick="GFGSquish(this);">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<h2>Click here to see the Squish effect </h2>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, hemos cambiado la duración del efecto y también hemos añadido un botón para ver el efecto.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function GFGSquish(el) {
new Effect.Squish(el, { duration: 3 });
}
</script>
</head>
<body>
<div id="myimage">
<img height=200px width=200px
src="gfg.png" alt="gfg logo" />
<br><br>
<button onclick="GFGSquish('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