En este artículo, demostraremos el efecto de Pulsate 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.Pulsate('id_of_element');
Effect.Pulsate('id_of_element', { pulses: 5, duration: 1.5 });
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 ShowEffect() que utiliza el método Pulsate() de esta biblioteca. Al hacer clic en Click Image to Pulsate , verás claramente el efecto.
Ejemplo: para ver el efecto, primero instale la biblioteca y luego abra el siguiente 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.Pulsate(element, { duration: 3.0 });
}
</script>
</head>
<body>
<h2>Pulsate Effect for Image</h2>
<div id="hideshow" onclick = "ShowEffect(this);">
<img src = "GEEKSIMAGES/geeks1.PNG" alt = "" /><br/>
Click Image to Pulsate
</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