Как повернуть изображение с помощью плагина 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>
Также нужны другие методы, поддерживаемые большинством браузеров, спасибо!
Ответы 3
У вас есть 404 по jQuery и плагину jQuery. Из-за этого ваша страница выдает ошибку JavaScript, что $ не определено.
Вам необходимо изучить базовые методы отладки JavaScript. Быстрый поиск нашел эту статью, которая выглядит как хорошее место для начала:
Ваша логика поворота изображения верна. Он будет работать, если будет выполнен, когда документ будет готов.
<script type = "text/javascript">
//<![CDATA[
var angle = 1;
$(document).ready(function() {
setInterval(function() {
$("#pic").rotate(angle);
/* angle += 1; Increases the rotating speed */
}, 100);
});
//]]>
</script>
n.b. Я просто педантичен, но заметил, что Том не использует тип документа XHMTL, // <! [CDATA [необходим только в том случае, если вы используете XHTML. Подробнее здесь: stackoverflow.com/questions/66837/…
Как только вы исправите проблемы с включением 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>
Чтобы уточнить ответ jvan: причина для помещения его в document.ready заключается в том, что DOM веб-страницы еще не готов к изменению (или "просмотрен" вашим javascript). Более подробная информация о готовом событии здесь: docs.jquery.com/Tutorials:Introduction _ $ (document) .ready ()