Come matura Internet, tecnologie come Cascading Style Sheets diventano più in grado di produrre effetti speciali accattivanti. CSS3, sostenuto dai browser più recenti, in grado di animare gli oggetti in una pagina Web in una varietà di modi. Se vuoi fare uno spin oggetto, per esempio, è possibile animare utilizzando JavaScript e CSS3 trasforma. Rendere il codice ancora più compatto con l'aggiunta di poche righe di jQuery per il codice JavaScript.

istruzione

1 Aggiungere il seguente codice JavaScript alla sezione head del documento. Rende jQuery disponibile alla pagina web:

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

2 Aggiungere un div con un titolo alla tua pagina incollando il codice riportato di seguito nella sezione corpo del documento:

<Div id = "div1">
<H1> Questa è un'intestazione </ h1>
</ Div>

3 Creare un pulsante per chiamare la funzione che ruota il div con il seguente codice:

<Input type = valore "pulsante" = "button" onclick = "rotate ()" />

4 Incollare il codice riportato di seguito nella sezione dello script del documento:

var obj = "div1";
Angolo di var = 0;
Intervallo di var = 100;
incremento = 5;

La variabile obj contiene l'ID del div si desidera ruotare. Il codice inizializza la variabile dell'angolo a zero. Quella variabile contiene attuale angolo dell'oggetto di rotazione. Controllare la velocità di rotazione impostando i valori delle variabili di intervallo e incremento. La funzione che ruota l'oggetto si definisce in modo ricorsivo. La variabile intervallo determina la frequenza con il codice chiama tale funzione. Tale valore è 100 millisecondi in questo esempio. La variabile incremento determina quanti gradi l'oggetto ruota durante ogni chiamata di funzione.

5 Incollare il seguente funzione sotto il codice mostrato nell'esempio precedente:

funzione di rotazione () {
$ ( '#' + Obj) css ({
'-moz-Transform': 'rotate (' + angolo + 'deg)',
'MsTransform': 'rotate (' + angolo + 'deg)',
'Rotate (' + angolo + 'deg)',: '-webkit-transform'
'-o-Transform': 'rotate (' + angolo + 'deg)'
});

angle + = incremento;
setTimeout (rotazione, intervallo);
}

Questa funzione chiama il metodo css di jQuery e passa trasformare attributi i cui valori sono "rotazione". Browser diversi richiedono diversi attributi. Ad esempio, i browser Webkit richiedono l'attributo -webkit-trasformare, mentre Opera ha bisogno l'attributo -o-trasformare. Il codice precedente utilizza quattro attributi diversi per accogliere tutti i browser moderni. Le ultime due righe di codice incrementare l'angolo di rotazione e richiedono la stessa funzione utilizzando nuovamente il metodo setTimeout.

6 Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante nella pagina Web per fare lo spin div e voce.

Consigli e avvertenze

• Sostituire il titolo nel div con qualsiasi oggetto che ti piace. Per effettuare una rotazione di immagini, invece, aggiungere un tag "img" al div.
• Esperimento con i valori di intervallo e di incremento per ottenere l'effetto desiderato di filatura.
• Aumentare il valore dell'intervallo di rallentare l'animazione. Diminuire il valore di incremento per far ruotare l'oggetto più agevolmente.
• Internet Explorer versioni più vecchie di Internet Explorer 9 non supportano la rotazione con le trasformazioni CSS3.