Hvordan å gjøre en Wave overgangen med jQuery

JQuery er en Javascript-bibliotek-kode som gjør det mulig å animere visse ting, for eksempel lysbildeserier, på ditt nettsted. For å gjøre en bølge overgang i en lysbildeserie med jQuery, bruker jqFancyTransitions plugin: opprette en mappe på webserveren, legger plugin kodefilen til det, og kode jQuery lysbildefremvisning med en bølge overgang inn i HTML-koden på websiden der du ønsker å vise det.

Bruksanvisning

1 Åpne din foretrukne FTP-program og koble til din server.

2 Opprett en ny mappe i rotmappen. Name it "js".

3 Last opp alle bildene du vil vise i lysbildeserien til webserveren. Noter nettadressene til hvert av bildene. Du må skrive inn disse i HTML-koden på nettsiden senere.

4 Gå til jqFancyTransitions nedlastingssiden og laste ned den nyeste versjonen av jqFancyTransitions plugin (se Ressurser).

5 Last opp jqFancyTransitions kodefilen til den nye "js" mappen du opprettet.

6 Åpne HTML-koden fil av websiden som du vil legge til lysbildefremvisning med en bølge overgang til.

7 Finn sted på siden der du vil legge til fremvisningen og klikk for å flytte markøren der, og skriv deretter inn følgende i HTML-koden:

<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;
type = "text / javascript"> </ script>
<Script src = "js / jqFancyTransitions.js" type = "text / javascript"> </ script>

Dette tillater deg å inkludere jQuery på siden din. Den første manuset flagget tillater deg å inkludere jQuery fra Googles servere, noe som er raskere og mer brukervennlig enn vert det på din egen server.

8 Skriv inn følgende for å skape et rom for lysbildeserien og inkludere dine lysbilder på siden:

<Div id = 'waveslideshow'>
<Img src = 'http: //site.com/pic1.jpg' alt = 'Bilde 1' />
<Img src = 'http: //site.com/pic2.jpg' alt = 'Bilde 2' />
</ Div>

Erstatt "http://site.com/pic1.jpg&quot, og" http://site.com/pic2.jpg&quot; med nettadressene til bildene dine, og "Bilde 1" og "Bilde 2" tekst med alternativ tekst for bilder. Legg til flere bilder, om ønskelig, ved hjelp av "<img src = 'URL Her alt =' Alternativ tekst her '/>" struktur, sette inn din egen nettadresse og alternativ tekst for hver.

9 Skriv inn følgende:

<Script>
$ (Document) .ready (function () {

$('#slideshowHolder').jqFancyTransitions({ width: X, height: X, effect: 'wave' });

});
</ Script>

Bytt ut "X" etter "width" med ønsket bredde av slideshowet i piksler. Bytt ut "X" etter "høyde" med ønsket høyde av slideshowet i piksler.
Dette skaper en lysbildefremvisning med bølgen overgang i din webside.

10 Lagre HTML-webside-fil og laste den opp til webområdet ditt.

Hint

• Sjekk nettsiden når du er ferdig for å sikre at siden vises riktig.