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 Mover . Este efecto se usa para hacer que el elemento se mueva suavemente a los parámetros dados. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.Move('object', [options] )
Parámetros: Este efecto tiene tres parámetros en el objeto de opciones que se describen a continuación:
- x: Es un número entero que representa el nuevo valor de la izquierda, ya sea de forma absoluta o relativa dependiendo de la moda.
- y: Es un número entero que representa el nuevo valor superior, ya sea de forma absoluta o relativa según la moda.
- modo: Es una string que especifica si el elemento se mueve de forma absoluta o relativa a su propia posición.
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 Move 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 Move effect to
// move the element to the
// given absolute position
new Effect.Move(element, {
x: 0,
y: 0,
mode: 'absolute'
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Move Effect</h2>
<button onclick="ShowEffect('hideshow')">
Click me to Move the line!
</button>
<br><br>
<div id="hideshow"
style="position: absolute;">
LINE TO MOVE
</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 Move effect to
// move the element to the
// given relative position
new Effect.Move(element, {
x: 50,
y: -50,
mode: 'relative'
});
}
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>script.aculo.us Move Effect</h2>
<button onclick="ShowEffect('geeks_1')">
Click me to show the effect
</button>
<br><br>
<div id="geeks_1" style=
"position: absolute; top: 250px">
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