<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Событие прокрутки колёсика мыши в JavaScript

Событие прокрутки колёсика мыши в JavaScript

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

Вот код JavaScript, который, во-первых, добавляет требуемое нам событие на страницу, а также демонстрирует функцию для обработки колёсика мыши.

<script type="text/javascript">
  // Функция для добавления обработчика событий
  function addHandler(object, event, handler) {
    if (object.addEventListener) {
      object.addEventListener(event, handler, false);
    }
    else if (object.attachEvent) {
      object.attachEvent('on' + event, handler);
    }
    else alert("Обработчик не поддерживается");
  }
  // Добавляем обработчики для разных браузеров
  addHandler(window, 'DOMMouseScroll', wheel);
  addHandler(window, 'mousewheel', wheel);
  addHandler(document, 'mousewheel', wheel);
  // Функция, обрабатывающая событие
  function wheel(event) {
    var delta; // Направление колёсика мыши
    event = event || window.event;
    // Opera и IE работают со свойством wheelDelta
    if (event.wheelDelta) { // В Opera и IE
      delta = event.wheelDelta / 120;
      // В Опере значение wheelDelta такое же, но с противоположным знаком
      if (window.opera) delta = -delta; // Дополнительно для Opera
    }
    else if (event.detail) { // Для Gecko
      delta = -event.detail / 3;
    }
    // Запрещаем обработку события браузером по умолчанию
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
    alert(delta); // Выводим направление колёсика мыши
  }
</script>

Теперь, если Вы попытаетесь прокрутить колесо мыши от себя, то увидите "1" во всплывающем окне. А если на себя, то "-1".

Возможно, не все из Вас знают, что такое Gecko. Gecko - это движок для многих браузеров, одним из самых популярных таких браузеров является Firefox.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (9):

BotaniQue BotaniQue 10.06.2013 11:59:56

Здравствуйте, Михаил! А не могли бы Вы навести примеры где используется этот скрипт? Спасибо.

Ответить

Admin Admin 10.06.2013 13:16:19

Например, для прокрутки пользовательских полос прокрутки у блоков.

Ответить

BotaniQue BotaniQue 10.06.2013 14:56:59

Спасибо, понял.

Ответить

AntDant AntDant 10.06.2013 14:43:48

Михаил, почему вам не написать статью про все события сразу. Например как у меня на сайте?

Ответить

Admin Admin 10.06.2013 14:45:02

http://myrusakov.ru/event-javascript.html

Ответить

AntDant AntDant 10.06.2013 14:50:34

Так вот откуда я их столько много знаю =)

Ответить

Rostyk Rostyk 08.06.2014 13:06:38

я в javascript 0 но мне нужен скрипт для прокрутки блоков где задать какие блоки вращать?

Ответить

Daedal Daedal 21.08.2017 13:17:43

Прошу прощения за некропост, но вопрос горит и для профи он элементарный: Как убрать назначенное событие? removeEventListener почему-то не работает.. Я создаю функцию: function removeHandler(object, event, handler) { if (object.removeEventListener) { object.removeEventListener(event, handler, false); } // else if (object.attachEvent) { // object.attachEvent('on' + event, handler); // } else alert("Обработчик не поддерживается"); } Она вызывается по нажатию кнопки. Нажатие обрабатывается, но функция не удаляет установленное на mousewheel событие. Помогите, пожалуйста!

Ответить

Daedal Daedal 21.08.2017 13:51:54

Была опечатка. Всё работает. Спасибо, что предоставили площадку для общения самим с собой.))

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.