2008-12-13 6 views
11

Wie drehen Sie ein Bild mit jQuery-rotate Plugin?Howto Bild mit jquery drehen Plugin drehen?

Ich habe folgendes versucht, und es scheint nicht zu funktionieren:

<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> 

Andere Methoden, die von den meisten Browsern unterstützt werden, zu werden wollten, danke!

Antwort

24

Sie haben eine 404 auf jQuery und das jQuery-Plugin. Aus diesem Grund wirft Ihre Seite einen JavaScript-Fehler, dass $ nicht definiert ist.

Sie müssen grundlegende JavaScript-Debugging-Techniken lernen. Eine schnelle Suche fand diesen Artikel, der wie ein guter Ort, sieht für Sie zu starten: das Bild zu drehen ist rechts

7

Ihre Logik. Es wird funktionieren, wenn es ausgeführt wird, wenn das Dokument bereit ist.

<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

Um auf Jvan Antwort zu erarbeiten: Der Grund, warum es in document.ready zu setzen, weil die Webseite DOM noch nicht bereit ist, modifiziert werden (oder ‚sah‘ durch dein Javascript). Weitere Informationen zum Ready-Event finden Sie hier: http://docs.jquery.com/Tutorials:Introducing_$ (Dokument) .ready() –

+2

n.b. Ich bin nur pedantisch, aber mir ist aufgefallen, dass Tom den XHMTL-Doctype nicht verwendet, das //

2

Sobald Sie Ihre jquery-Include-Probleme beheben, können Sie Ihr Skript reparieren. Ihre Syntax ist falsch: Hier ist das Update:

<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>