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 Resaltar . Este efecto se utiliza para resaltar el elemento suavemente con los colores personalizables. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Highlight( 'id_of_element', [options] )
o
Effect.Highlight( element, [options] )
Opciones: tiene cuatro objetos, como se mencionó anteriormente y se describe a continuación:
- startcolor: Se utiliza para establecer el color del primer cuadro del efecto. El valor predeterminado es
- endcolor: Se utiliza para establecer el color del último cuadro del efecto. El valor predeterminado es
- restorecolor: Se utiliza para establecer el color de fondo del elemento una vez finalizado el efecto. El valor predeterminado es el color de fondo actual del elemento.
- keepBackgroundImage: se utiliza para establecer si se conservará o no alguna imagen de fondo del elemento.
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 Highlight 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 Highlight effect with
// the base options of the
// Effect class
new Effect.Highlight(element, {
duration: 1,
from: 0,
to: 1.0
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Highlight Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me to Highlight the line!
</button>
<br />
<br />
<div id="hideshow">
LINE TO HIGHLIGHT
</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 Highlight effect with
// the startcolor and endcolor
// options of the effect
new Effect.Highlight(element, {
startcolor: '#ff0000',
endcolor: '#ffff00'
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Highlight Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click me to Highlight the line!
</button>
<br />
<br />
<div id="geeks_1">
GeeksforGeeks
</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