Come creare un piano scorrevole per un sito web in jQuery

December 28

Come creare un piano scorrevole per un sito web in jQuery


Web designer che stanno cercando di aggiungere più di interattività ed effetti chiazza di petrolio per i loro siti web dovrebbero guardare oltre jQuery. Come una libreria JavaScript, jQuery rende gli script più facile da scrivere, soprattutto per i progettisti già ben versato in codice Cascading Style Sheet. piani scorrevoli sono un effetto popolare jQuery, e hanno molti usi. Usali per moduli di login, annunci speciali o avvisi.

istruzione

HTML e CSS Setup

1 Aprire il file HTML in un editor di codice; trovare il tag <body>. Dopo quel tag, aggiungere apertura e chiusura <div> tag e dare la coppia specifica, ma significativo, nome ID. Tra questi tag, aggiungere il contenuto che si desidera far scorrere verso il basso. Lo stile <div> e il suo contenuto in CSS come si farebbe per qualsiasi altra parte della pagina web. Controlla la pagina Web nel browser in modo da poter vedere come il <div> guarda.

2 Fare un altro <div> di sotto di quello che contiene il contenuto scorrevole. Aggiungere un collegamento all'interno di quel <div> con testo come "Clicca per vedere." Questo legame innesca la parte superiore <div> a scivolare verso il basso. Dare questo link un ID e lo stile del nuovo <div> come una scheda. Quando i visitatori vedere il sito, vedranno la scheda prima.

3 Aggiungere il seguente codice CSS per nascondere il <div> quando un utente visita la pagina:

div-name {display: none; }

4 Aggiungere la versione più recente della libreria jQuery al tuo sito web. Google fa una copia a disposizione del pubblico. È possibile utilizzare l'indirizzo web nel codice invece di scaricare jQuery e caricarlo da soli. Il tuo codice sarà simile a questa:

<Script type = "javascript / testo" come "javascript / testo" entro l'apertura tag <script>. Scrivere il seguente codice jQuery tra i tag <script>:

$ (Document) .ready (function () {

// Il codice va qui

});

6 Scrivere il codice jQuery per far scattare il <div> quando un utente fa clic sul collegamento. Ecco il codice:

$ ( "# View"). Clic (function () {

});

Questo codice indica al browser di iniziare una nuova funzione quando l'utente fa clic su un tag con un ID di "vista". Si aggiungerà l'animazione di scorrimento all'interno di tale funzione.

7 Scrivere il codice jQuery per applicare l'animazione "slideDown" per tag <div>. In jQuery, si inizia con un selettore CSS come "div" per il nome del tag o "# DIV-nome" per l'ID del tag, e quindi si aggiunge una funzione. Ecco il codice:

$ ( '# Div-name') slideToggle ( 'lento.');

Il codice sopra scivola anche la casella di nuovo dopo che l'utente fa clic sul collegamento per la seconda volta. Cambiare "lento" a "fast" per accelerare l'animazione.

Consigli e avvertenze

  • Per eseguire il debug di codice JavaScript come jQuery, utilizzare gli "Strumenti Web Developer" sotto "Strumenti" in Google Chrome o scaricare l'estensione Firebug per Firefox. Questi strumenti di visualizzazione errori JavaScript e fornire altre utili funzioni.