Erstellen Sie ein Sliding-Top für eine Website in jQuery
Web-Designer, die suchen, ihre Websites mehr Interaktivität und glatte Effekte hinzu sollte nicht weiter als jQuery aussehen. Als eine JavaScript-Bibliothek erleichtert jQuery Skripte zu schreiben, vor allem für Designer bereits sehr versiert im Cascading Style Sheet Code. Gleitende Tops sind eine beliebte jQuery-Wirkung, und sie haben viele Verwendungen. Verwenden sie für Anmeldung Formulare, besondere Ankündigungen oder Warnungen.
Anweisungen
HTML- und CSS-Setup
1 Öffnen Sie Ihre HTML-Datei in einem Editor; finden Sie < Body >-Tag. Fügen Sie nach diesem Tag öffnende und schließende Tags < Div > hinzu, und geben Sie das Paar einen bestimmten, aber dennoch sinnvollen, ID-Namen. Fügen Sie zwischen diesen Tags Inhalt zu schieben. Stil der < Div > und seinen Inhalt in CSS, wie bei einem anderen Teil der Webseite. Überprüfen Sie die Webseite in Ihrem Browser, damit Sie sehen können, wie das < Div > aussieht.
2 Stellen Sie ein weiteres < Div > unter dem Feld, das Ihre gleitenden Inhalt enthält. Füge einen Link innerhalb dieser < Div > mit Text wie "Click to See." Diese Verbindung löst die < Div > von oben nach unten schieben. Geben Sie diese Verknüpfung eine ID und Stil das neue < Div > als Registerkarte. Wenn Besucher die Website angezeigt wird, sehen sie zuerst die Registerkarte.
3 Fügen Sie den folgenden CSS-Code um die < Div > auszublenden, wenn ein Benutzer die Seite besucht:
Div-Name {anzeigen: none;} 4 Die neueste Version der jQuery-Bibliothek zu Ihrer Website hinzufügen. Google stellt eine Kopie der Öffentlichkeit zur Verfügung. Die Webadresse können Sie in Ihrem Code statt jQuery herunterladen und es selbst hochladen. Der Code wird wie folgt aussehen:
< Skript-Typ = "Javascript/Text" als "Javascript/Text" im öffnenden < Skript > Tag. Schreiben Sie den folgenden jQuery-Code zwischen die < Script >-Tags:
$(document).ready(function() {}
Der Code einfügen hier
});
6 Schreiben Sie jQuery Code < Div > auslösen, wenn ein Benutzer auf den Link klickt. Hier ist der Code:
{$("#view").click(function()}
});
Dieser Code weist den Browser an eine neue Funktion zu starten, klickt der Benutzer auf einen Tag mit der ID "Ansicht." Sie fügen die gleitende Animation innerhalb dieser Funktion.
7 Schreiben Sie Ihre jQuery-Code, um die Animation "SlideDown" auf Ihre < Div >-Tag anwenden. In jQuery Sie beginnen mit einem CSS-Selektor wie "Div" für den Tag-Namen oder "#Div-Name" für die ID des Tags, und dann Sie auf Funktion hinzufügen. Hier ist der Code:
$('#div-name').slideToggle('slow');
Der obige Code Folien auch die Box oben wieder nachdem der Benutzer ein zweites Mal auf den Link klickt. Ändern Sie die "slow" bis "schnell", um die Animation zu beschleunigen.
Tipps & Warnungen
- Zum Debuggen von JavaScript-Code wie jQuery verwenden Sie die "Web-Developer-Tools" unter "Tools" in Google Chrome oder downloaden Sie die Firebug-Erweiterung für Firefox. Diese Werkzeuge anzeigen JavaScript-Fehler und andere nützlichen Funktionen bieten.