Scribd
Cargar
101 vistas

GUI VII Efectos en JavaScript PDF

El documento explica cómo usar efectos en jQuery mediante eventos. Se describe que el código típicamente incluye un elemento "para tocar" sobre el cual se activa un evento como click o hover, que luego dispara un efecto en un elemento "afectado". A veces ambos elementos son el mismo. Algunos efectos pueden ocurrir sin un evento si se omite la línea del evento. El documento también incluye instrucciones para revisar el código en la pestaña script.js.

Cargado por

Max Eder Jayacc DelaCruz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
101 vistas

GUI VII Efectos en JavaScript PDF

El documento explica cómo usar efectos en jQuery mediante eventos. Se describe que el código típicamente incluye un elemento "para tocar" sobre el cual se activa un evento como click o hover, que luego dispara un efecto en un elemento "afectado". A veces ambos elementos son el mismo. Algunos efectos pueden ocurrir sin un evento si se omite la línea del evento. El documento también incluye instrucciones para revisar el código en la pestaña script.js.

Cargado por

Max Eder Jayacc DelaCruz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Efectos en JavaScript

Eventos de jQuery:
El código casi siempre es así:

$(document).ready(function() {
$('elementoParaTocar').evento(function() {
$('elementoAfectado').efecto();
});
});
Donde "elemento para tocar" es el elemento HTML sobre el que harás clic, pasarás
el puntero, o con el que interactuarás de otro modo; y "elemento afectado" es el
elemento HTML que se desvanece, cambia de tamaño, o que sufre alguna otra
transformación.

Algunas veces los dos elementos se refieren a uno solo: pasar el cursor sobre
un <div> para cambiar su opacidad. Otras veces interactúas con un elemento aparte;
por ejemplo, hacer clic en un botón para cambiar el tamaño de un <div>.

A veces, si quieres que un efecto ocurra de inmediato, sin un evento


como .click() o .hover(), omitir la segunda línea del ejemplo anterior:

$(document).ready(function() {
$('elementoAfectado').efecto();
});

Instrucciones
Mira el código que está en la pestaña script.js. Asegúrate de entender lo que
hará. Hace clic en Guardar y enviar cuando estés listo para comprobar tu hipótesis.

1.- Creamos HTML, en la cual interactuaremos con Style y JavaScript


2.- Creamos JavaScript.js

3.- Creamos la Hoja de Style.css

4.- en JavaScript Creamos una Función de “Agregar“, para entender mejor tratar de leer el
código:

5.- le damos un poco de estilo a nuestra página escribiendo un poco de código en Style.css
Creamos Otra Plantilla el trabajo anterior lo guardamos en una carpeta

6.- Empezaremos con los juegos pero primero aprender a dibujar!

Creamos HTML

7.- Creamos las funciones de Dibujo en JavaScript.js


8.- Empezamos a Dibujar:

También podría gustarte