Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

jQuery — библиотека JavaScript, которая специализируется на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM(Document Object Model — «объектная модель документа»), обращаться к атрибутам и содержимому элементов DOM, манипулировать ими, анимировать изображения.
Для того чтобы начать работать с jQuery и научиться анимировать объекты с его помощью необходимо:
1. Cкачать фреймворк с официального сайта проекта (либо в конце урока, вместе с примером в прикреплении)

2. А так же плагин jquery.animate-colors-min.js .
3. Поместить скаченное в папку с вашей html-страницей
Готово, можно приступать.
Прокомментированные части кода, приведенные ниже, являются частью примера в прикреплении в конце статьи.

Подключение

<html>
  <head>
   /* Подключаем библиотеку */
     <script type="text/javascript" src="jquery.js"></script> 
   /* Подключаем плагин для функции .animate() */
     <script type="text/javascript" src="jquery.animate-colors-min.js"></script>   
  </head>
</html>

Селекторы

В поиске элементов на странице заключается практически половина успешной работы с jQuery. Ниже приведены примеры правильного обращения к тому или иному элементу:

   $("#content") // выбираем элемент с id=content 
   $("div#content") // выбираем div с id=content (хотя id и так однозначен)     
   $(".wrapper") // выбираем элементы с class=wrapper 
   $("div.wrapper") // выбираем div'ы с class=wrapper 
   $(".wrapper.box") // выбираем элементы с class=wrapper и box 
   $("h2") // выбираем все теги h2 
   $("h1, h2") // выбираем все теги h1 и h2

Детальнее о селекторах, очень доступно и понятно тут

События

События – это любые действия пользователя, будь то ввод данных с клавиатуры, проматывание страницы или передвижения мышки, и конечно же «клики». jQuery работает практически со всеми событиями в JavaScript'е, вот несколько их них:

  • click — клик по элементу
  • keydown — нажатие клавиши на клавиатуре
  • mousemove — движение курсора
  • mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
  • mouseover — наведение курсора на элемент

   $('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо
    $(this).animate({       // this - указатель на селектор, используемый ранее в функции
      left: "+=800px",      // Передвигаем элемент на 800 пикселей влево
      color: "#FFB727"      // Плавная смена цвета
    }, 5000);               // Применение в течении 5 секунд
   });

Animate()

Все эффекты анимации в jQuery "крутятся" вокруг метода animate. Данная функция берет один или несколько CSS-свойств элемента и изменяет их от исходного до заданного за N-ое количество итераций.

   $("#start").animate({                 // Отображение меню
      top: "+=650px"
   }, 1000);
   $('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо
     $(this).animate({        // this - указатель на селектор, используемый ранее в функции
       left: "+=800px",       // Передвигаем элемент на 800 пикселей влево
       color: "#FFB727"       // Плавная смена цвета
     }, 5000);                // Применение в течении 5 секунд
  });

Помимо смещений объекта и изменения его цвета, можно, например, изменить размер объекта, его прозрачность:
$(".drinks").on("mouseover", function(e){ // При наведении мыши на элемент класса drinks
        $(this).animate({                
            opacity: 1,                  // Прозрачность = 0%
            height: "200px",             // Высота, 
            width: "200px"               // Ширина = 200px;
        },200);                          // За 0.2с
      });

Список всех атрибутов метода можно найти здесь.

Вывод

В этом уроке были затронуты только базовые принципы работы с jQuery. На самом деле, список применения этого замечательного инструмента гораздо больше(например, предоставление удобного интерфейса ПП для AJAX).


Полный код:

<script>
  // Ждем загрузки страницы
$(document).ready(function () {
 
   $('.drinks').hide();  // по умолчанию все напитки не отображаются на экране
   $("#start").css({     // Применяем свойства КТС для id=start, точно так же, как и в CSS
        width: "200x",   // ширина, высота, цвет
        height: "75px",
        color: "#006AFF"
   });
   $("#start").animate({     // Отображение меню
      top: "+=650px"
   }, 1000);
   $('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо
    $(this).animate({
      left: "+=800px",
      color: "#FFB727"                   // Плавная смена цвета
    }, 5000);
   });
   $('h1').on("mouseout", function(e) {  // При снятии фокуса  - влево
    $(this).animate({
      left: "-=800px",
      color: "#FFFFFF"
    }, 5000);
   });  
   $("#start").on("click", function(e) { // Анимация на клик лкм(событие)
        $(this).animate({                // Меняем цвет текста за 1000мс
            color: "#FF3A22",
        }, 1000);
      $(".drinks").css("opacity", "0.8");    // Задаем прозрачность картинок по дефолту
      $('.drinks').show('slow');             // Отображаем все картинки
      // При наведении мыши на любую из картинок
      $(".drinks").on("mouseover", function(e){
        $(this).animate({
            opacity: 1,                  // Прозрачность = 0%
            height: "200px",             // Высота, ширина = 200px;
            width: "200px"
        },200);
      });
      // Убрали курсор
      $(".drinks").on("mouseout", function(e){
        $(this).animate({                // Возвращаем значения по умолчанию
            opacity: 0.8,
            height: "128px",
            width: "128px"
        },200);
      });
      // При нажатии на любую картинку в поле start отобразиться следующий текст
      $(".drinks").on("mousedown", function(e){
        $("#start").text("good choice, man!");
      });
      // При отжатии кнопки мыши - возвращаем исходный текст
      $(".drinks").on("mouseup", function(e){
        $("#start").text("choose your drink!");
      });  
    }); 
 
});
</script>

А вот и сам пример, который наглядно демонстрирует работу приведенных выше функций и методов

Прикрепленный файлРазмер
lesson.zip992.08 кб