September 20
JavaScript è un linguaggio di scripting lato client popolare; è leggero, veloce, e viene eseguito nel browser, che consente l'interazione in tempo reale tra il visitatore del sito e la pagina Web. Una comune applicazione per JavaScript è quello di creare gallerie di immagini che rispondono alle azioni dell'utente; per esempio, mediante la visualizzazione di un'immagine di dimensioni quando un utente fa clic del mouse la sua immagine una miniatura in poi, senza caricare un'intera nuova pagina nel browser.
1 Fare una lista non ordinata delle miniature delle immagini. Ogni miniatura è legato alla immagine alle dimensioni originali. Il codice potrebbe essere simile a questo:
<P> Fare clic su una miniatura per vedere l'immagine full size. </ P>
<Id ul = \ "Galleria immagini \">
<li><a href=\"cat-pic-large.jpg\"><img src=\"cat-pic-thumb.jpg\" alt=\"cat\" title=\"This is my cat, Tabby\" /></a></li>
<li><a href=\"dog-pic-large.jpg\"><img src=\"dog-pic-thumb.jpg\" alt=\"dog\" title=\"This is my dog, Toby\" /></a></li>
<li><a href=\"hampster-pic-large.jpg\"><img src=\"hampster-pic-thumb.jpg\" alt=\"hampster\" title=\"This is my hampster, Tibby\" /></a></li>
</ Ul>
2 Implementare una funzione di gestione degli eventi. Ci sono molti script disponibili online. I seguenti esempi implementano la sintassi di facile uso della funzione addEvent da Dean Edwards.
3 Inizializzare lo script galleria al caricamento della pagina. Aggiungere un listener di eventi per l'evento del carico della finestra, e usarlo per attivare la funzione di inizializzazione.
addEvent (finestra, 'carico', setupGallery);
4 
Aggiungere un listener di eventi del mouse-click per ogni immagine nella vostra lista galleria. Quando l'utente fa clic su un'immagine, la funzione showFullSize verrà chiamata. Per rendere la funzione stizzoso, precaricare l'immagine full size nel browser.
Funzione setupGallery () {
var galleria = document.getElementById ( 'Galleria immagini')
ANDARE
immagini var = gallery.getElementsByTagName ( 'img')
ANDARE
for (var i = 0; i <images.length; i ++) {
addEvent (immagini [i], 'click', showFullSize)
ANDARE
preloadFullSize (immagini [i])
ANDARE
}
}
5 Creare una funzione per visualizzare l'immagine full-size. Recuperare le informazioni file di origine del grande di immagine dal tag link che avvolge l'elemento dell'immagine. Creare un nuovo elemento "div" come contenitore di visualizzazione. Creare un nuovo elemento di immagine con le informazioni fonte appropriata, e aggiungere l'immagine al contenitore. Dal momento che l'esempio qui coprirà l'intera pagina, creare un collegamento per rimuovere l'immagine full-size e mostrare di nuovo la galleria. Infine, aggiungere il contenitore per il corpo del documento HTML per rendere il tutto visibile.
Funzione showFullSize (e) {
cancelClick (e)
ANDARE
fonte var = this.parentNode.getAttribute ( 'href')
ANDARE
Display var = document.createElement ( 'div')
ANDARE
display.setAttribute ( 'id', 'imageDisplayFrame')
var pic = document.createElement ( 'img')
ANDARE
pic.setAttribute ( 'src', fonte)
ANDARE
display.appendChild (pic)
ANDARE
rimozione = document.createElement ( 'p')
ANDARE
removal.innerHTML = \ "Chiudi la finestra \"
removal.onclick = function () {removeFullSize ();}
display.appendChild (rimozione)
ANDARE
document.getElementsByTagName ( 'body') [0] .appendChild (display)
ANDARE
}
6 Utilizzare lo stesso metodo per ottenere il percorso del file immagine full size del nella funzione dell'immagine preloader. Questa funzione crea un nuovo oggetto immagine e assegna un valore di fonte, causando il browser per caricare l'immagine prima che venga visualizzato.
Funzione preloadFullSize (immagine) {
fonte var = image.parentNode.getAttribute ( 'href')
ANDARE
var = NewPic nuova immagine ()
ANDARE
newPic.src = fonte
ANDARE
}
7 Si noti che la funzione di showFullSize chiama un'altra funzione chiamata cancelClick. Questa funzione consentirà di evitare l'azione predefinita del mouse dell'utente, vale a dire la navigazione verso l'immagine full-size.
Funzione cancelClick (e) {
provare{
window.event.cancelBubble = true
ANDARE
window.event.returnValue = false
ANDARE
} Catch (errore) {
e.stopPropagation ()
ANDARE
e.preventDefault ()
ANDARE
}
return false
ANDARE
}
8 Creare una funzione removeFullSize, che verrà chiamato quando l'utente sceglie di chiudere l'immagine full size e tornare alla galleria.
Funzione removeFullSize () {
Display var = document.getElementById ( 'imageDisplayFrame')
ANDARE
display.parentNode.removeChild (display)
ANDARE
}
9 Lo stile voci di elenco con i CSS (Cascading Style Sheets) per fare un display attraente. Questo esempio ha un solido sfondo nero; si potrebbe desiderare di utilizzare un'immagine .png semitrasparente nell'implementazione.
<Style type = \ "text / css \">
galleria di immagini{
margin: 0;
padding: 0
ANDARE
}
Galleria immagini li {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: 1px solid # 8E8E8E;
float: left;
text-align: center
ANDARE
}
Galleria immagini li a img {
border: 0;
margin: 20px auto
ANDARE
}
imageDisplayFrame {
background-color: # 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0
ANDARE
}
imageDisplayFrame img {
margin: 10px 150px auto auto
ANDARE
}
imageDisplayFrame p {
colore: #FFF
ANDARE
}
</ Style>
10 Metti alla prova la tua galleria di immagini delle miniature basato su JavaScript nel browser e modificare lo stile CSS a piacere.