Oggi tratteremo un piccolo tutorial Jquery che ci aiutera’ per capire come lavora questo semplendido e potente linguaggio. In particolare vedremo come aplicare un effetto “fade” al passaggio del mouse su un’immagine.
Partiamo analizzando il prodotto che vogliamo ottenere:
- L’immagine dovra’, di fatto, impostare un’opacita’ minore al passagio del mouse e maggiore quando il mouse non e’ sull’immagine.
- Dovremo includere le librerie Jquery per far funzionare il nostro script, pertanto scarichiamole qui: Scarica Jquery
Ok Iniziamo:
-
Prepariamo la pagina html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery Fade In/Fade Out</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <meta name="robots" content="NOINDEX,NOFOLLOW" /> <!-- JavaScripts--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/custom.js"></script> </head> <body> <div id="content"> <div class="tutorial"> <div class="fade_tutorial_title">Effetto Fade Applicato Alle Foto</div> <div id="images"> <a href="#"><img src="images/01.jpg" alt="Angelina" width="121" height="83" class="foto_fade" /></a> <a href="#"><img src="images/02.jpg" alt="Jessica" width="121" height="83" class="foto_fade" /></a> <a href="#"><img src="images/03.jpg" alt="Rihanna" width="121" height="83" class="foto_fade" /></a> <a href="#"><img src="images/04.jpg" alt="Belen" width="121" height="83" class="foto_fade" /></a></div> </div> </div> </body> </html>
In questa sezione di codice HTML abbiamo creato il “contenitore” che ci servira’ per far visualizzare le immagini (01.jpg,etc) all’utente finale che visitera’ il nostro sito. Inoltre abbiamo inserito nel documento un richiamo al motore jquery e al nostro script ( vedi porzione “javascript” che creiamo su una pagina distinta).
-
Diamo un pò di stile al documento
Lo stile e’ una delle parti fondamentali del Web 2.0 in quanto e’ estremamente utile e indispensabile anche per la programmazione in jquery.
Ecco il codice CSS per far funzionare il nostro “mini-progetto”:
/*si definisce il corpo del testo: colore del testo, dello sfondo e carattere */
*{
padding:0;
margin:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
padding:0;
margin:0;
background-color:#fff;
font-size: 12px;
color: #333;
}
/*foto_fade e' la parte piu' importante, vedi la sezione "jquery" */
.foto_fade {
border: 1px solid #575757;
margin-left: 10px;
}
.img {
border: 1px solid #575757;
margin-left: 12px;
}
/*Contenitore principale dove vengono visualizzate le immagini, si imposta la larghezza e il margine */
.tutorial {
float: left;
width: 570px;
margin-top: 20px;
}
#content {
width: 570px;
margin: auto;
}
/*si definisce il titolo sopra le immagini (vedi demo) */
.fade_tutorial_title {
float: left;
font-size: 18px;
}
/*si imposta la distanza tra un'immagine all'altra, la dimensione totale che devono occupare tutte le immagini (552px;) */
#images {
width: 552px;
border: 1px solid #E8E3E4;
float: left;
margin-top: 7px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
padding-left: 8px;
}
Leggete i commenti del codice per una spiegazione dettagliata del foglio di stile.
-
Ultimo passo: animiamo con Jquery
Creiamo un nuove file e chiamiamolo custom.js ( o un nome a nostro piacimento), e incollateci dentro questo codice (vedi i commenti del codice per capire come funziona) :
//Effetto fade applicato alle foto
$(function() {
// Opacità delle immagini impostate al 50%
$(".foto_fade").css("opacity","0.5");
// Al passaggio del mouse
$(".foto_fade").hover(function () {
// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// quando il mouse non è sull'elemento
function () {
// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
//Effetto fade applicato al testo
$(function() {
// Opacità del testo impostata al 50%
$("#text p").css("opacity","0.5");
// Al passaggio del mouse
$("#text p").hover(function () {
// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// quando il mouse non è sull'elemento
function () {
// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
//effetto fade applicato al div
$(function() {
// Opacità del div impostata al 50%
$("#div").css("opacity","0.5");
// Al passaggio del mouse
$("#div").hover(function () {
// imposta l'opacità al 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
// quando il mouse non è sull'elemento
function () {
// imposta l'opacità al 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
Ecco fatto!, ricordate di collegare il file appena creato nel file html; – Ora potete vedere il risultato del Jquery Fade –
[…] This post was mentioned on Twitter by Paul Milford and Michael Davis, Riccardo Mel. Riccardo Mel said: Effetto Fade #Jquery tutorial sulle immagini: http://tinyurl.com/2ukbogm […]
If you’d like to learn more about java technology visit our Geek’s Guide on Java training.
There you’ll find recorded webcasts, videos, white papers, and free tools that can teach you
all you need to know about this cool and often overlooked technology…
java training