Простейшие динамические эффекты на JavaScript

JavaScript позволяет разрабатывать различные динамические эффекты, которые могут преобразовать внешний вид сайта, обеспечить простоту и удобство навигации по сайту, сократить время, количество движений и кликов пользователю сайта. В общем, может существенно преобразовать сайт в лучшую сторону.
Для того чтобы сделать сайт на JavaScript реагирующий на действия пользователя, нужно как-то в сценариях JavaScript следить за действиями пользователя. Отслеживать действия пользователя позволяют обработчики событий. Обработчики событий следят за действиями пользователя, и при возникновении какого-либо события, соответствующий обработчик события вызывает привязанный к нему код JavaScript. Например, есть кнопка в форме HTML-документа и при клике пользователем на эту кнопку браузер вызовет обработчик события, отвечающий за клик по элементу страницы - onClick, и если к этому обработчику события привязан код JavaScript, то он будет выполнен.
Для наглядности давайте выполним очень интересный и нужный эффект: при клике пользователем по определенному тексту, ниже будет появляться какой-либо текст (например, подробное описание или дополнительная информация).
Как уже я говорил выше, за щелчок по элементу веб-страницы следит обработчик события onClick. Проще всего его привязать прямо к необходимому тегу, указав его в качестве атрибута и передав ему код JavaScript, который должен быть выполнен при вызове этого обработчика. Обработчики событий можно указывать большинству тегов, мы выберем тег SPAN:
Код
<span onClick="clickText()">Кликните по мне</span>

В этом примере обработчику события передана функция, хотя в общем случае можно передавать любой код JavaScript. Функцию мы напишем далее. Текст, который должен появиться будет находиться в блоке div и сделаем его первоначально невидимым. Для этого воспользуемся стилевым свойством display, которому зададим значение none. При клике по тексту заключенному в теге SPAN, будем менять значение свойства display: либо none на block, либо block на none. На данном этапе получим
Код
<span onClick="clickText()">Кликните по мне</span>
<div id="info_text" style="display:none; ">Это поясняющий текст к выше расположенному.</div>

С помощью идентификатора id="info_text" в последующем найдем нужный нам блок div. Теперь можно написать функцию clickText()
Код
function clickText()
{
obj_div=document.getElementById("info_text");
if (obj_div.style.display=="block")
obj_div.style.display="none";
else
obj_div.style.display="block";
}

В функции вроде все просто, только прокомментирую, что в переменную obj_div помещается объект блока div, со свойствами которого и работаем. Теперь можно написать результирующий код, добавив немного оформления:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Поясняющий текст</title>
</head>
<body>
<div style="border-bottom:dashed 1px #000;">
<span onClick="clickText()" style="cursor:pointer; font-size:110%;">Кликните по мне</span>
</div>
<div id="info_text" style="display:none; background:#a1ecff;">Это поясняющий текст к выше расположенному.</div>
<script type="text/javascript">
function clickText()
{
obj_div=document.getElementById("info_text");
if (obj_div.style.display=="block")
obj_div.style.display="none";
else
obj_div.style.display="block";
}
</script>
</body>
</html>

Если после загрузки страницы кликнуть по тексту расположенному в теге SPAN, то появиться дополнительный текст. При последующих кликах, дополнительный текст будет скрываться и заново появляться.

 

Реакция на наведение курсора мыши

 

Для того чтобы реализовать реакцию сценария JavaScript на наведение на какой-либо элемент HTML-документа, нужно воспользоваться обработчиками событий:
  • onMouseOver - обрабатывает событие: пользователь передвинул указатель мыши на элемент;
  • onMouseOut - обрабатывает событие: пользователь убрал указатель мыши с элемента.

Для иллюстрации возможностей данных обработчиков событий реализуем изменение цвета фона и текста блока при наведении на него курсора мыши. Для изменения цвета при наведении курсора мыши на элемент воспользуемся обработчиком событий onMouseOver:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Изменение цвета текста и фона при наведении курсора на элемент</title>
</head>
<body>
<div onMouseOver="this.style.color='#fff' ;this.style.background='#a2d' ">При наведении указателя мыши на этот текст измениться цвет фона и текста</div>
</body>
</html>

При просмотре данного кода в браузере попробуйте навести курсор мыши на текст: цвет фона и текста изменится, но после увода курсора цвет не изменится на первоначальный. Поэтому нужно добавить еще обработчик событий onMouseOut, которому поручим вернуть цвета в исходное значение.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Изменение цвета текста и фона при наведении курсора на элемент</title>
</head>
<body>
<div onMouseOver="this.style.color='#fff' ;this.style.background='#a2d' " onMouseOut="this.style.color='#000' ;this.style.background='#fff' " >При наведении указателя мыши на этот текст измениться цвет фона и текста</div>
</body>
</html>

В этом примере мы использовали оператор this, который содержит объект текущего элемента. В нашем случае оператор this содержит объект блока div, поэтому мы смело использовали его для изменения свойств. Использование оператора this значительно облегчает написание скриптов, так как получить доступ к объекту не составляет особого труда, делает код компактнее. Сравните с предыдущим примером, где для получения объекта необходимого блока div использовали конструкцию document.getElementById(идентификатор), предварительно указав идентификатор в атрибуте Id для нужного блока div.

 

Динамическое отображение текста страницы

 

Есть еще большое количество обработчиков событий, о которых мы еще поговорим на страницах этого сайта, теперь давайте рассмотрим способы изменения содержимого (текста) страницы. Для подобных целей удобно использовать свойства элемента innerHTML и innerText. Эти два свойства доступны как для чтения, так и для записи. Рассмотрим работу с ними подробнее на следующем примере: пусть при наведении курсора мыши на блок с текстом, текст меняется.
Для отслеживания событий наведение курсора на элемент и увода с элемента будем использовать уже знакомые нам обработчики событий onMouseOver и onMouseOut.
Код
<div onMouseOver="newText(this)" onMouseOut="backText(this)">Наведите на текст курсор мыши</div>

При наведении курсора мыши на блок будет выполняться функция newText(), которая заменит текст в блоке и некоторые свойства. При уводе курсора с элемента будет вызываться функция, которая отменит все изменения.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div onMouseOver="newText(this)" onMouseOut="backText(this)">Наведите на текст курсор мыши</div>
<script type="text/javascript">
function newText(obj_div)
{
obj_div.innerHTML="Вы что наделали? :) Уберите немедленно курсор мыши с этого текста! :)";
obj_div.style.background="#FFA8A8";
}
function backText(obj_div)
{
obj_div.innerHTML=" Наведите на текст курсор мыши ";
obj_div.style.background="#fff";
}
</script>
</body>
</html>

Изменить текст в элементе, можно изменив значение свойства innerHTML или innerText соответствующего объекта. Если надо определить объект по идентификатору, то можно записать следующим образом
Код
<div id="blockText">Тут будет новый текст</div>
<script type="text/javascript">
document.getElementById("blockText").innerHTML="<b>Это новый текст!</b>";
</script>

Свойства innerHTML отличается от innerText, тем, что при использовании свойства innerHTML можно использовать теги HTML (то есть будет текст форматироваться тегами при выводе на экран), а при использовании innerText теги будут отображены как обычный текст (и естественно текст не будет форматироваться тегами). Но также нужно учитывать, что свойство innerText не поддерживается браузером Mozilla Firefox.
С помощью рассмотренных нами простых способов создания динамических эффектов, можно создавать более сложные манипуляции и эффекты с содержимым страницы.
Опубликовано 20 сентября 2008 г.
Комментарии к публикации
Всего комментариев: 13
прохожий: Дмитрий | 08.07.2009, 04:05 #
сайт: нету
Спасибо за урок! Наконец то во что то начал врубаться :)))
прохожий: Гость | 21.01.2010, 08:37 #
Это то, что доктор прописал, огромное спасибо за урок, добавляю Вас в закладки:-)
прохожий: David | 18.02.2010, 02:53 #
Класстныи урок спасибо
прохожий: Влад | 04.05.2010, 04:03 #
Спасибо, хорошие уроки! не спорю, кстате можно еще в виде спойлера такую команду написать, тож удобно:)
<div style="padding: 3px; background-color: #C0C0C0; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>{TEXT1}: </b><a href='#' onClick='return false;'>Скрыть</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>{TEXT1}: </b><a href='#' onClick='return false;'>показать</a>'; }" /><b>{TEXT1}: </b><a href="#" onClick="return false;">показать</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT2}</div></div></div>
Суперадмин: | 11.05.2010, 07:33 #
Много букавок :) Не осилил все это смотреть. В браузере ie6 проверил, выдало ошибку. Оставлю - может кому пригодится :)
прохожий: Гость | 19.05.2010, 01:22 #
сайт: best-game.info
onclick="document.getElementById('login').style.display='block'; return false;"

Жаль только что это всё блокирует IE
Суперадмин: | 19.05.2010, 05:29 #
Как это блокирует?
прохожий: Гость 2 | 19.05.2010, 01:24 #
сайт: wiip.ru
B в блоке:
<div id="login">
Содержание всплывающего окна.<p style="text-align:right;">
<a href="#" onclick="document.getElementById('login').style.display='none'; return false;">
[X] закрыть</a></p>
бла бла бла<br />
бла бла бла<br />
бла бла бла<br />
бла бла бла<br />
бла бла бла<br />
бла бла бла<br />
бла бла бла<br />
</div>
прохожий: Гость 3 | 19.05.2010, 01:24 #
сайт: dsgs.ru
И в css::)))
#login {
position:fixed;
left: 35%;
top: 100px;
border:solid #999999 4px;
display: none;
z-index: 10;
overflow: hidden;
background-color:#FFFFFF;
color:#000;
text-align:center;
padding:10px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
}
прохожий: Гость | 04.06.2010, 19:08 #
А не могли бы вы подсказать, как при помощи тега onclick заставить одну картинку измениться на другую?
Суперадмин: | 05.06.2010, 04:46 #
У каждой картинки есть свойство src, этому свойству объекта картинки надо присвоить нужный url-адрес картинки, тогда картинка измениться.
прохожий: Даниил-благодарный админу | 02.05.2012, 14:27 #
Я Вам так благодарен, просто! Наконец-то, кто-то мне всё же разъяснил это, я до этого просто боялся Java, а без него сайт выглядит куцо и статично(
Ещё раз спасибо!
прохожий: Владимир | 13.11.2013, 15:42 #
Спасибо, большое спасибо. Ясно, лаконично, последовательно, убедительно объяснили столь сложную тему.
После прочтения вашей статьи всё встало на свои места и Java на сайте заработала. С пожеланием удачи.
Вход в аккаунт
Новости сайта