La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. En este artículo, demostraremos el efecto Morph . Este efecto se utiliza para cambiar suavemente el estilo CSS de un elemento al que se proporciona como parámetro. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Morph( 'element', [options] )
Parámetro: Este efecto tiene un solo parámetro en el objeto de opciones que se describe a continuación:
- estilo: Esto representa el estilo CSS que el efecto cambia suavemente.
Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. En el cual, hemos escrito una pequeña función de JavaScript llamada método ShowEffect que utiliza el método Morph de esta biblioteca. Los siguientes ejemplos demuestran el método.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Morph effect by specifying
// new CSS styles
new Effect.Morph(element, {
style: 'background: #f00; color: #fff;'
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Morph Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me to Morph the line!
</button>
<br />
<br />
<div id="hideshow" style="background:#cccccc;">
LINE TO MORPH
</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">
</script>
<script type="text/javascript">
function ShowEffect(element) {
// Using the Morph effect by
// specifying new CSS styles
new Effect.Morph(element, {
style:
'height: 100px; width: 150px; color: #FF0000;'
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Morph Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me to Morph the element!
</button>
<br />
<br />
<div id="hideshow" style=
"background: lightgreen;">
Element to Morph
</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