View
48
Download
1
Category
Preview:
DESCRIPTION
HTML Examen
Citation preview
"Examen Del 3er Bimestre EPT".¡Bien hecho! Vamos a agregar un evento más de jQuery a nuestra simulación de la"destrucción de Krypton".
1.- Creamos HTML y también las conexiones a Style.css, JavaScript.js en los círculos insertaremos los nombres que corresponda.
2.- Ahora Creamos una Hoja Style.css e introducimos el código para dibujar un circulodándole un color y de fondo como podemos ver simulamos una galaxia con una imagen de tipo *.Gif y para q no se repita la imagen tenemos el controlar repeat
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
3.- Una vez creada la hoja de Style.css no olvidar la conexión.
4.- Ahora insertamos el código de JavaScript en la hoja correspondiente que esJavaScript.js para la simulación de cambio de color del planeta con solo un clic.
5.- Realizamos la Conexión de HTML con la hoja de JavaScript.js.
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
6.- Ahora, para poder utilizar los códigos que están en JavaScript Usted necesita Jquery-2.1.4.min-js es un archivo similar al JavaScript, tenemos que en lazarlo con el html para q funcione y verificar que estén en la misma ubicación con el html.
7.- El proyecto debe de quedar de esta manera
7.- click en el mundo y sucede lo siguiente:
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
8.- Agregamos dos planetas más… como deben saber los planetas se crearon dentro deun Div gracias al CSS de la siguiente manera en body Agregamos lo siguiente: a cada div le otorgamos un nombre gracias al id=”…..” con eso podremos identificar quien es quien
9.- Ahora para darle emoción a los planetas le aplicaremos cada función ustedesPodrán distinguir porque utilizaremos sus identificadores:
Al tercer planeta se le agregara una clase red que está en CSS quiere decir que el planeta cambiara de color.
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
Al segundo planeta se le agregara la función de FadeOut que es desaparecer.
Hover: es la acción de pasar el cursor por el objeto, en este caso por el <divid=”planeta2”></div>
Clic: ya lo conocen no hay por qué describirlo…
10.- Realicemos las pruebas respectivas
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
11.- Ahora agregaremos algunas funciones extras en Style.css Introduciremos elSiguiente código:
12.- En JavaScript Agregaremos las siguiente Función: cree un párrafo en Html ydescriba como funciona está última función… Pista: presiona la tecla espaciadora.
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz
Recommended