En este artículo, demostraremos el efecto de Fold mediante el uso de una biblioteca de JavaScript llamada script.aculo.us que tiene una reducción suave primero en dirección vertical y luego horizontal hacia la izquierda para finalmente desaparecer. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Fold('id_of_element');
// Or
Effect.Fold('id_of_element', { duration: dur });
Parámetros:
- id_of_element: Elemento sobre el que se va a aplicar el efecto.
- duración: Duración que tarda 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 FoldEffect() que utiliza el método Fold() de esta biblioteca.
- Al hacer clic en Haga clic aquí para ver el efecto Plegado, verá 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 FoldEffect(element){
new Effect.Fold(element, {duration:4});
}
</script>
</head>
<body>
<div id = "myimage" onclick = "FoldEffect(this);">
<img height=200px width=200px
src = "gfg.png" alt = "gfg logo" />
<h2>Click here to see the Fold 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 src = "prototype.js"></script>
<script src =
"scriptaculous.js?load = effects">
</script>
<script type = "text/javascript">
function FoldEffect(element){
new Effect.Fold(element, {duration:3});
}
</script>
</head>
<body>
<div id = "myimage">
<img height=200px width=200px
src = "gfg.png" alt = "gfg logo" />
<br><br>
<button onclick = "FoldEffect('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