En este artículo, demostraremos el efecto de Puff mediante el uso de la biblioteca de JavaScript llamada script.aculo.us que tiene una transición suave de uno a otro. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Puff('id_of_element');
Effect.Puff('id_of_element', { duration: 3 });
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
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 PuffEffect() que utiliza el método Effect.Puff() de esta biblioteca. Al hacer clic en Click me to Puff the Out , verá 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 PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function displayImage(element){
new Effect.Appear(element,{duration:1, from:1.1, to:1.2});
}
</script>
</head>
<body>
<div onclick = "displayImage('imageId')">
Click me to display the image
</div>
<br/>
<div id="imageId" onclick = "PuffEffect(this);">
<img src = "GEEKSIMAGES/geeks1.PNG" alt = "" /><br/>
Click Image to Puff Out
</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