En este artículo, demostraremos el efecto de Blind Up usando una biblioteca de JavaScript llamada script.aculo.us . El efecto BlindUp ofrece una transición cegadora suave al elemento. También podemos ajustar la duración de este efecto.
Sintaxis:
Effect.BlindUp('id_of_element');
// o
Effect.BlindUp('id_of_element', [options]);
Opciones:
- duración: Duración de la atenuación del elemento, el valor predeterminado 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 este 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 BlindUp de esta biblioteca. Al hacer clic en Click me to BlindUp 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.BlindUp(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('hideshow')">
<button type="button">
Click me to BlindUp the line!
</button>
</div>
<br><br>
<div id="hideshow">
LINE TO BLIND UP
</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.BlindUp(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