Блог старого компьютера

Блог старого компьютера


Главная Jquery Jquery "при наведении на... " (Урок 4)

Jquery "при наведении на... " (Урок 4)

03.10.2012 04:50 Администратор Jquery
Печать PDF

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

  И так ниже предоставлю простой код как при наведении на блок изменить его css свойство.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {  // 1 строка
$(".block").mouseover(function (){  // 2 строка 
$(this).css("border","1px solid red"); //3 строка
});
$(".block").mouseout(function (){
$(this).css("border","none");
});
});
</script>

<div class="block">Блок</div>

 И так в коде выше мы создали обыкновенный блок div с классом block. Именно с эти блоком мы и будем работать.  И так приступим к написанию Jquery кода который даст нам возможность изменять его css свойства. Разберем строчки скрипта:

  1. Первая строчка скрипта содержит Jquery функцию ready() которая разрешает выполнение кода заключенного в ее тело когда объектная модель документа готова к использованию. Данная функция является аналогом события window.onload
  2. Вторая строчка  отслеживает появление мыши над определенным объектом (в данном случае это элемент с классом block) с помощью события mouseover.
  3. В третье строчке содержится код выполняющий действия над блоком. В данном случае добавляет блоку рамку в 1 пиксель с помощью Jquery фкнкции css(). this в данной строке означает что работаем с этим же блоком над которым отслеживали мышь.

Ну, а дальнейшие строки я думаю вы уже в в состоянии сами объяснить, в них происходят аналогичные действия за исключением того что они происходят в момент когда курсор покидает границы блока.

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

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?