Maggior parte dei progetti Web si restringono se stessi per una quantità limitata di spazio orizzontale nella schermata del browser, in genere intorno al 950 a 960 pixel. Barre laterali prendono alcuno di questo spazio pure. Quando si desidera aggiungere una casella che contiene il contenuto che è più facile da leggere quando dato spazio più orizzontale, facendo il div espandibile è una soluzione. Questo div può espandere sopra la barra laterale e occupano tanto spazio come si desidera, e si può rendere innescare con un evento hover mouse in jQuery, un framework JavaScript che funziona bene con animazioni.

Istruzioni

1

Aprire la pagina Web in blocco note o un editor di codice e trovare il tag "< div >" per il div che si desidera espandere il a sinistra. Ottenere il nome ID del tag di apertura "< div >".

2

Trovare il tag "< style >" tra i tag "< head >" nel codice HTML. Aggiungere i tag se non li trovate. Aggiungere una regola di stile destinato il nome ID del div. uso questa regola per impostare la larghezza del div.

< style type = "text/css" >

espandere {

width: 300px;

}

< / stile >

Aggiungere "overflow: hidden" e un'altezza se si desidera creare una casella che si espande per rivelare più contenuti.

3

Aggiungere il file della libreria jQuery tra i tag "< head >", mettendola da qualche parte sotto il tag "< style >":

< tag script sotto la libreria jQuery file e scrivere la funzione di "documento pronto" che impedira lo script in esecuzione fino al termine del caricamento della pagina:

< script type = "text/javascript" >

$(function() () {

});

< / script >

Tutto il codice script andrà tra le parentesi graffe di questa funzione.

5

Indirizzare il vostro div utilizzando il relativo ID in un selettore di jQuery e aggiungere la funzione di "hover()" per far fare qualcosa quando un utente passa sopra all'elemento div:

$('#expand').hover(function() () {

}, Function () {

});

Quando si utilizza "hover()" hai bisogno di due funzioni: uno per ciò che accade quando l'utente passa sopra un elemento e l'altro per ciò che accade quando l'utente allontana il puntatore del mouse.

6

Aggiungere la funzione di "animate()" per la prima funzione di "hover()". Impostare la larghezza di + "=" il numero aggiuntivo di pixel che si desidera aggiungere alla larghezza dell'elemento div quando si espande. Con il numero di millisecondi desiderato per la velocità di animazione, sostituire la "500" in questo codice:

.animate({$(questo)

Larghezza: ' + = 200'

}, 500, Function () {});

Sostituire "200" con il numero di pixel che si desidera aggiungere alla larghezza della div. Questo esempio di codice utilizza "$(this)" per selezionare l'elemento padre, ovvero il div. È uguale a "$('div')" in questo script.

7

Invertire l'espansione in larghezza animazione quando l'utente mouses lontano il div:

.animate({$(questo)

Larghezza: '-=200'

}, 500, Function () {});

Lo script finito si presenta come:

$(function() () {

$('#expand').hover(function() () {

$(this).animate({

width: '+=200'

}, 500, function() {});

}, function () {

$('#expand').animate({

width: '-=200'

});

});

});