Hvordan lage en Spinning jQuery Animasjon

Etter hvert som Internett modnes, teknologier som Cascading Style Sheets bli bedre i stand til å produsere iøynefallende spesialeffekter. CSS3, som støttes av de nyeste nettleserne, kan animere objekter på en webside i en rekke måter. Hvis du ønsker å lage et objekt spinn, for eksempel, kan du animere det ved hjelp av Javascript og CSS3 forvandler. Gjøre koden enda mer kompakt ved å legge til noen få linjer med jQuery til Javascript-koden.

Bruksanvisning

1 Legg til følgende Javascript-kode i dokumentet hode delen. Det gjør jQuery tilgjengelig for websiden:

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

2 Legg en div med en overskrift på siden din ved å lime inn koden nedenfor i body-delen av dokumentet:

<Div id = "div1">
<H1> Dette er en overskrift </ h1>
</ Div>

3 Lag en knapp for å ringe funksjon som roterer div med følgende kode:

<Input type = "button" value = "button" onclick = "roter ()" />

4 Lim inn koden nedenfor inn i dokumentet manus seksjon:

Var obj = "div1";
Var vinkel = 0;
Var intervall = 100;
trinn = 5;

Den obj variable holder ID-en til div du ønsker å rotere. Koden initialiserer vinkelen variable til null. Det variable holder objektets aktuelle rotasjonsvinkel. Styre rotasjonshastigheten ved å innstille verdiene av intervallet og inkrement variabler. Funksjonen som roterer objektet kaller seg rekursivt. Intervallet variabelen bestemmer hvor ofte koden kaller denne funksjonen. Denne verdien er 100 millisekunder i dette eksemplet. Økningen variabelen bestemmer hvor mange grader objektet roterer under hver funksjon samtale.

5 Lim inn følgende funksjon under koden vist i forrige eksempel:

funksjon rotate () {
$ ( '#' + Obj) .css ({
'-moz-Transform': 'roter (' + vinkel + 'deg)',
'MsTransform': 'roter (' + vinkel + 'deg)',
'-webkit-Transform': 'roter (' + vinkel + 'deg)',
«-o-Transform ':' roter ( '+ vinkel +' deg) '
});

vinkel + = økning;
setTimeout (rotere, intervall);
}

Denne funksjonen kaller jQuery sin css metode og passerer forvandle attributter med verdier "rotere." Ulike nettlesere krever ulike attributter. For eksempel, Webkit nettlesere krever -webkit-transform attributt, mens Opera må -o-transform attributt. Koden ovenfor bruker fire forskjellige attributter for å imøtekomme alle moderne nettlesere. De to siste linjer med kode øke rotasjonsvinkelen og kalle den samme funksjon igjen ved hjelp av setTimeout metode.

6 Lagre dokumentet og vise den i en nettleser. Klikk på knappen på siden for å gjøre div og overskriften spinn.

Hint

  • Bytt ut overskriften i div med noen gjenstander du vil. For å lage et bilde spinn i stedet, legger en "img" tag til div.
  • Eksperimenter med intervall og tilvekst verdier for å oppnå den spinnende effekten du ønsker.
  • Øke verdien av intervallet for å bremse ned animasjonen. Redusere verdien av tilveksten å gjøre objektet roterer mer jevnt.
  • Internet Explorer-versjoner eldre enn IE9 ikke støtter rotasjon ved hjelp av CSS3 transforme.