2008-12-13 4 views
11

Как вы поворачиваете изображение, используя jQuery-rotate плагин?Как повернуть изображение, используя плагин jquery rotate?

Я попытался следующие, и это не похоже на работу:

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

Другие методы, которые поддерживаются большинством браузеров тоже хотел, спасибо!

ответ

24

У вас есть 404 на jQuery и плагин jQuery. Из-за этого ваша страница бросает ошибку JavaScript, что $ не определен.

Вам необходимо изучить основные методы отладки JavaScript. Быстрый поиск нашел эту статью, которая выглядит как хорошее место для вас, чтобы начать:

7

Ваша логика для поворота изображения является правильным. Он будет работать, если выполняется, когда документ готов.

<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

Чтобы уточнить ответ jvan в: Причина поставить его в document.ready потому, что веб-страница DOM пока не готов быть изменен (или «посмотрел на» по вашему javascript). Дополнительная информация о готовом событии находится здесь: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready() – 2010-11-06 18:51:16

2

Как только вы исправите проблемы с jquery, вы можете исправить свой сценарий. Ваш синтаксис является неправильным: Вот исправление:

<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> 
Смежные вопросы