Molti siti web oggi utilizzano un linguaggio di programmazione chiamato jQuery per presentare i contenuti in modi dinamici e interessanti, fornendo uniche esperienze utente Web. Scorrevoli aree di contenuto possono essere implementati con il linguaggio jQuery. Questo tutorial vi guiderà attraverso i passi necessari per creare un area di contenuto orizzontalmente e verticalmente scorrevole.

istruzione

1 Creare gli ID div per ogni area di contenuto. Il seguente esempio di codice mostra come stabilire una elementi div e di classe che verrà successivamente fatto riferimento nel codice:

<Div id = "wrapper">

<Div id = "maschera>

<Div id = "esempio1" class = "esempio1"

<a name="example1"</a>

<Div class = "content"> example1

<a href="#example1" class="panel"<1> </a>

<a href="#example2" class="panel"<2> </a>

</ Div>

</ Div>

2 Utilizzare i CSS per definire il modo in cui l'area del contenuto si comporterà quando scivola e riferimenti alla classe che hai creato. Per esempio:

body {

height:100%;

width: 95%;

margin: 0; padding: 0;

}

wrapper {

width:75%;

height: 100%;

position: absolute;

top: 0; left: 0;

background-color: # 01125;

overflow: hidden;

}

#mask {

width: 500%;

height: 100%;

background-color: #eee;

}

.articolo {

width: 20%;

height: 100%;

float: left;

background-color: #ddd;

}

.contenuto {

width: 400px;

altezza: 300px;

top: 20%;

margin: 0 auto;

background-color: #aaa;

position: relative;

}

Modificare le variabili in ogni elemento sopra e aggiungere o rimuovere elementi CSS aggiuntive, se necessario.

3 Scrivere la funzione javascript jQuery-based in grado di utilizzare le classi per presentare i contenuti, come definito nel file CSS. L'esempio che segue con i commenti mostra come è possibile manipolare le classi e le aree di contenuto:

$ (Document) .ready (function () {

//obtain all the links in the class panel

$ ( 'A.panel'). Clic (function () {

// Ripristinare il legame che hai evidenziato e selezionato in precedenza

$ ( 'A.panel') removeClass ( 'selezionato.');

$ (This) .addClass ( 'selezionato');

// Selezionare la voce corrente per ridimensionarla

corrente = $ (this);

};