En este artículo, demostraremos el efecto de Blind Down usando una biblioteca de JavaScript llamada script.aculo.us . El efecto BlindDown ofrece una transición cegadora suave al elemento. También podemos ajustar la duración de este efecto.
Sintaxis:
Effect.BlindDown('id_of_element');
// o
Effect.BlindDown('id_of_element', [options]);
Opciones:
- duración: Duración que se tarda en desvanecer el elemento, por defecto es 1.0.
- scaleX: valor booleano, por defecto es falso.
- scaleY: valor booleano, por defecto es verdadero.
- scaleContent: valor booleano, por defecto es verdadero.
- scaleFromCenter: valor booleano, por defecto es falso.
- scaleFrom: el valor entero predeterminado es 100.
- scaleMode: establece el modo de escala con un valor de string, por defecto es ‘box’.
- scaleTo: el valor entero predeterminado es 100.
Nota: Para usar esta biblioteca, se supone que debemos instalar la biblioteca y luego usarla en nuestros programas. Y para hacerlo puedes seguir el enlace http://script.aculo.us/downloads .
Ejemplo 1: Para demostrar el uso de este efecto, 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 BlindDown de esta biblioteca. Al hacer clic en Click me to BlindDown the line! , verás el efecto claramente.
Para ver el efecto, primero instale la biblioteca y luego abra este 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,controls">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.BlindDown(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to BlindDown the line!
</button>
</div>
<br><br>
<div id="geeks_1">
LINE TO BLIND DOWN
</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?load = effects,controls">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.BlindDown(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to ShowEffect!
</button>
</div>
<br><br>
<div id="geeks_1">
<div style="width: 10%; height: 10%;
background-color: green;">
Geeks For Geeks
</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