Блог

Главная - Вопросы по программированию - Анимация изображений с помощью jQuery

Анимация изображений с помощью jQuery

#javascript

#javascript

Вопрос:

Я пытаюсь реализовать эту анимационную ссылку на код

Я создал HTML-файл:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">

<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="work.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>

</head>
<body onload="rotateme();">

<img src="arrow.png" id="image">

</body>
</html>

файл javascript work.js:

 var rotateme = function(){
var value = 0
$("#image").rotate({ 
bind: { 
    click: function(){
        value  =170;
        $(this).rotate({ animateTo:value})
    }
 } 
});}

стиль файла css.css:

 #image{
margin:100px 100px;
}

Проблема в том, что когда я выполняю свой код, я получаю эти сообщения об ошибках на консоли:

Ошибка ссылки: jQuery не определен jquery.easing.min.js:46 Кодировка символов HTML-документа не была объявлена. В некоторых конфигурациях браузера документ будет отображаться с искаженным текстом, если документ содержит символы из-за пределов диапазона US-ASCII. Кодировка символов страницы должна быть объявлена в документе или в протоколе передачи. index.html Ошибка типа: $(…).поворот — это не рабочая функция.js: 8

Что не так?

Ответ №1:

Вам нужно включить jQuery Перед другими скриптами:

 <script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="work.js"></script>

Ошибка сообщает вам, что jquery.easing.min.js плагин пытается использовать jQuery, но он еще не существует, потому что он еще не включен в страницу

Комментарии:

1. Я изменил порядок скриптов, и по-прежнему никаких результатов: Кодировка символов HTML-документа не была объявлена. В некоторых конфигурациях браузера документ будет отображаться с искаженным текстом, если документ содержит символы из-за пределов диапазона US-ASCII. Кодировка символов страницы должна быть объявлена в документе или в протоколе передачи. index.html Ошибка типа: $ (…).поворот — это не работа функции.js: 9

2. Я попытался удалить событие onload в теге body (поскольку событие click уже определено в work.js файл)…. Осталось только первое сообщение об ошибке ( Кодировка символов HTML-документа не была объявлена. Документ … )

3. @user1444393 попробуйте добавить вышеуказанные мета-теги в свой html-файл

4. Я изменил свой код следующим образом: [мой код] [1] Теперь у меня нет сообщения об ошибке в консоли, но и результата тоже нет… моя картинка не вращалась! [1]: pastebin.com/98Ab6UDv

5. Обратитесь к моему ответу. Обновлено

Ответ №2:

Добавьте эти теги в свой HTML-тег inside head 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta content="utf-8" http-equiv="encoding">

Вызывайте этот способ, потому что сначала вам нужно определить jquery, а затем вызвать другие библиотеки

 <script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="work.js"></script>

Поместите свой код внутри $(document).готовая функция

 $(document).ready(function(){
var value = 0
$("#image").rotate({
bind:
 {
    click: function(){
        value  =170;
        $(this).rotate({ animateTo:value})
    }
 }

 });
 });

если у вас все еще есть проблема. загрузите рабочий файл по указанному ниже пути

Загрузка файла