Cómo hacer un giro de Animación jQuery

A medida que madura la Internet, las tecnologías tales como Cascading Style Sheets se vuelven más capaces de producir efectos especiales llamativos. CSS3, con el apoyo de los navegadores más recientes, puede animar objetos en una página Web en una variedad de maneras. Si desea hacer un giro de objetos, por ejemplo, puede animar usando JavaScript y CSS3 transforma. Hacer que el código aún más compacto mediante la adición de unas pocas líneas de jQuery para el código JavaScript.

Instrucciones

1 Agregue el siguiente código JavaScript para sección de cabecera del documento. Se hace jQuery disposición de la página Web:

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

2 Añadir un div con un título a su página pegando el código que se muestra a continuación en la sección del cuerpo del documento:

<Div id = "div1">
<H1> Este es un encabezado </ h1>
</ Div>

3 Crear un botón para llamar a la función que hace girar el div con el siguiente código:

<Input type = "button" value = "botón" onclick = "rotate ()" />

4 Pegar el código se muestra a continuación en la sección de escritura del documento:

var obj = "div1";
ángulo var = 0;
intervalo var = 100;
Valor mínimo = 5;

La variable obj tiene el ID del div que desea rotar. El código inicializa la variable ángulo a cero. Que contiene dicha variable ángulo actual del objeto de rotación. Controlar la velocidad de rotación mediante el establecimiento de los valores de las variables de intervalo y de incremento. La función que gira el objeto llama a sí mismo de forma recursiva. La variable intervalo determina con qué frecuencia el código llama a esa función. Ese valor es de 100 milisegundos en este ejemplo. La variable de la subasta determina cuántos grados el objeto gira durante cada llamada a la función.

5 Pegue el siguiente función por debajo del código que se muestra en el ejemplo anterior:

función de rotación () {
$ ( '#' + Obj) .css ({
'-moz-Transform': 'rotación (' + ángulo de + 'deg)',
'MsTransform': 'rotación (' + ángulo de + 'deg)',
'-webkit-Transform': 'rotación (' + ángulo de + 'deg)',
'-o-Transform': 'rotación ( "ángulo de +' + deg) '
});

+ = ángulo de incremento;
setTimeout (rotar, intervalo);
}

Esta función llama al método css de jQuery y pasa a transformar atributos cuyos valores son "rotar". Los distintos navegadores requieren diferentes atributos. Por ejemplo, los navegadores Webkit requieren el atributo -webkit-transform, mientras que Opera necesita el atributo -o-transformar. El código anterior utiliza cuatro atributos diferentes para dar cabida a todos los navegadores modernos. Las dos últimas líneas de código incrementan el ángulo de rotación y llaman a la misma función de nuevo utilizando el método setTimeout.

6 Guarde el documento y verlo en un navegador. Haga clic en el botón de la página web para hacer girar la div y rumbo.

Consejos y advertencias

• Sustituirán a la partida en el div con cualquier objeto que te gusta. Para hacer una imagen en lugar de centrifugado, añadir una etiqueta "img" para el div.
• Experimenta con los valores de intervalo e incremento para lograr el efecto de giro que desee.
• Aumentar el valor de intervalo para reducir la velocidad de la animación. Disminuir el valor del incremento posterior para hacer girar el objeto con mayor suavidad.
• Internet Explorer versiones más antiguas que IE9 no admiten la rotación uso de transformaciones CSS3.