Viele Websites verwenden heute eine Programmiersprache namens jQuery , um Inhalte in dynamische und überzeugende Weise zu präsentieren und bietet einen einzigartigen Web- Benutzer Erfahrungen . Sliding Content-Bereiche können mit dem jQuery Sprache implementiert werden . Dieses Tutorial führt Sie durch die notwendigen Schritte , um eine horizontal und vertikal verschiebbaren Content-Bereich zu erstellen gehen . Anleitung
Erstellen Sie die div IDs für jeden Content-Bereich . Das folgende Beispiel zeigt, wie ein div class und Elemente, die später im Code referenziert werden festgelegt:
2
Use CSS die Art und Weise , dass der Content-Bereich verhalten sich definieren , wenn es Rutschen und verweist auf die Klasse, die Sie erstellt haben, zum Beispiel :
body {
height: 100% ;
< p . > Breite : 95%;
margin: 0; padding: 0; }
# wrapper {
width: 500% ;
height: 100% ;
background- color: # eee ;
}
. Stück {
width: 400px ;
Höhe : 300px ;
top : 20%;
margin: 0 auto;
Hintergrund -color: # aaa ;
Position : . relativ;
}
ändern Sie die Variablen in jedem Element oben und hinzufügen oder Entfernen zusätzlicher CSS-Elemente wie nötig
< . br> 3
schreiben Sie die Javascript -basierte jQuery -Funktion, die Ihre Klassen verwenden, um Inhalte zu präsentieren , wie in der CSS -Datei definiert das folgende Beispiel mit Kommentaren zeigt, wie Sie die Klassen und Content-Bereiche zu manipulieren :
$ (document) . ready ( function () {
//erhalten alle Links in der Klasse Panel
$ (' a.panel ') . klicken ( function () {
//zurücksetzen der Link, den Sie markiert und ausgewählt das aktuelle Element, um es
current = $ (this) Größe ;
};
