En este artículo, demostraremos el efecto de SlideDown mediante el uso de la biblioteca de JavaScript llamada script.aculo.us , que tiene una transición fluida de uno a otro. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.SlideDown('id_of_element');
Effect.SlideDown('id_of_element', { duration: 3.0 });
Nota: Para usar esta biblioteca, se supone que debemos instalar o descargar la biblioteca y luego usarla en nuestros programas. Y para hacerlo puedes seguir el enlace http://script.aculo.us/downloads .
Acercarse:
Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. Hemos escrito una pequeña función de JavaScript llamada método ShowEffect() que usa el método SlideDown() de esta biblioteca. Al hacer clic en Haga clic en la imagen para SlideDown! , verás el efecto claramente.
Ejemplo: para ver el efecto, primero instale la biblioteca y luego abra este programa en el entorno local.
HTML
<html>
<head>
<script type = "text/javascript"
src="scriptaculous-js-1.9.0/lib/prototype.js">
</script>
<script type = "text/javascript"
src="scriptaculous-js-1.9.0/src/scriptaculous.js?load = effects">
</script>
<script type = "text/javascript">
function ShowEffect(element){
new Effect.SlideDown(element, { duration: 3.0 });
}
function displayImage(element){
new Effect.Appear(element,{duration:1, from:1.1, to:1.2});
}
</script>
</head>
<body>
<div onclick = "displayImage('hideshow')">
Click the image to SlideDown!
</div>
<br/>
<div id="hideshow" onclick = "ShowEffect(this);">
<img src = "GEEKSIMAGES/geeks1.PNG" alt = "" /><br/>
Image to Slidedown
</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