2008-12-13 46 views
11

¿Cómo rotar una imagen usando el complemento jQuery-rotate?¿Cómo rotar la imagen usando el plugin jquery rotate?

he intentado lo siguiente y no parece funcionar:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>View Photo</title> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript" src="scripts/jquery.rotate.1-1.js"></script> 
<script type="text/javascript"> 
var angle = 0; 
setInterval (function (e) { 
    rotate(); 
}, 100); 
function rotate() { 
    angle = angle + 1; 
    $('#pic').rotate(angle); 
} 
</script> 
</head> 
<body> 
<img border="0" src="player.gif" name="pic" id="pic"> 
</body> 
</html> 

Otros métodos que son compatibles con la mayoría de los navegadores son buscados también, gracias!

Respuesta

24

Tiene un 404 en jQuery y el complemento jQuery. Por eso, su página arroja un error de JavaScript, que $ no está definido.

Necesita aprender las técnicas básicas de depuración de JavaScript. Una búsqueda rápida encontró este artículo que parece un buen lugar para empezar:

7

Su lógica para hacer girar la imagen es correcta. Funcionará si se ejecuta cuando el documento está listo.

<script type="text/javascript"> 
//<![CDATA[ 
    var angle = 1; 

    $(document).ready(function() { 
     setInterval(function() { 
      $("#pic").rotate(angle); 
      /* angle += 1; Increases the rotating speed */ 
     }, 100); 
    }); 
//]]> 
</script> 
+1

Para más detalles sobre la respuesta de Jvan: La razón para ponerlo en document.ready se debe a la página web DOM todavía no está listo para ser modificado (o 'mirado' por tu javascript). Más información sobre el evento listo está aquí: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready() –

+2

n.b. Solo estoy siendo pedante, pero noté que Tom no usa el doctype XHMTL, el //

2

Una vez que arregle su jquery incluya problemas, puede corregir su script. Su sintaxis es incorrecta: Aquí está la solución:

<script type="text/javascript"> 
//<![CDATA[ 
    var angle = 1; 

    $(document).ready(function(angle) { 
     setInterval(function(angle) { 
       $("#pic").rotate(angle); 
       /* angle += 1; Increases the rotating speed */ 
     }, 100); 
    }); 
//]]> 
</script> 
Cuestiones relacionadas