Oggi, molti siti Web utilizzano un linguaggio di programmazione chiamato jQuery al contenuto presente in modo dinamico e avvincente, fornendo un'esperienza utente unica Web. Aree di contenuto di scorrimento può essere implementato con la lingua di jQuery. Questo tutorial vi guiderà attraverso i passi necessari per creare un'area di contenuto scorrevole orizzontalmente e verticalmente.
Istruzioni
1
Creare il div ID per ciascuna area di contenuto. Nell'esempio di codice seguente viene illustrato come definire un elementi div e classe che più tardi verranno fatto riferimento nel codice:
< div id = "wrapper" >
< div id = "maschera >
< div id = "esempio1" class = "esempio1"
< a name = "esempio1" < /a >
< div class = "contenuto" > esempio1
< a href = "#example1" class = "pannello" < 1 >< /a >
< a href = "#example2" class = "pannello" < 2 >< /a >
< / div >
< / div >
2
Utilizzare i CSS per definire il modo in cui l'area del contenuto si comporterà quando scivola e fa riferimento alla classe che hai creato. Per esempio:
corpo () {
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;
}
.item {
width:20%;
height:100%;
float:left;
background-color:#ddd;
}
.content {
width:400px;
height:300px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
Modificare le variabili in ogni elemento sopra e aggiungere o rimuovere elementi CSS aggiuntivi necessarie.
3
Scrivere la funzione jQuery basato su javascript che utilizzerà le lezioni al contenuto presente come definito nel file CSS. L'esempio seguente con commenti Mostra come è possibile modificare le classi e le aree di contenuto:
Web {
//obtain all the links in the class panel
$('a.panel').click(function () {
//reset the link which you highlighted and selected previously
$('a.panel').removeClass('selected');
$(this).addClass('selected');
//select the current item to resize it
current = $(this);
};