Чертёж одиннадцатый JS, ещё немного, «половина» четвёртая

Сегодня попробуем соединить обе цели применения JS – «красивость» и функциональность, создав на Клавиной страничке «плавающую» кнопку, которая всегда будет находиться в правом нижнем углу окна браузера и при щелчке по ней прокручивать страничку вверх, к её началу.

1. Создай на Клавиной страничке (файл klava.htm) объект < DIV>, который и будет нашей «плавающей» кнопкой:

< DIV id=kn style=" position: absolute; width: 100; height: 40;

font-size: 150%;

filter: alpha(style=0, opacity=30); "

class=panelka

onmouseover=menu_over()

onmouseout=menu_out()

onclick=scrollBy(0, -document.body.scrollTop)>

Вверх

< /DIV>

2. В тег < BODY> запиши события, которые мы будем обрабатывать:

< BODY onscroll=menu() onresize=menu() onload=menu() >

3. В раздел < HEAD> запиши функции JS:

< SCRIPT type=text/javascript >

function menu()

{ kn.style.top=document.body.scrollTop+

document.body.clientHeight-60;

kn.style.left=document.body.scrollLeft+

document.body.clientWidth-110;

}

function menu_over()

{ kn.filters.alpha.opacity=100;

}

function menu_out()

{ kn.filters.alpha.opacity=30;

}

< /SCRIPT>

4. Вот и всё. А теперь разберёмся с некоторыми новыми объектами, их методами и событиями.

События onscroll и onresize возникают, соответственно, при прокручивании документа и при изменении размера окна браузера. И в том, и в другом случае, а также при загрузке документа запускается функция menu().

В этой функции у объекта kn изменяются координаты, причём задаются они не относительно документа, а относительно той его части, которая видна в окне браузера. Дают нам такую возможность свойства scrollTop и scrollLeft объекта body, которые содержат текущие координаты левого верхнего угла той части документа, который виден в окне. К этим величинам мы добавляем ширину clientWidth и высоту clientHeight окна браузера. А вот зачем нужны числа 60 и 110, от чего они зависят и что зависит от них, ты подумаешь и ответишь сам.

В функциях menu_over() и menu_out() изменяется прозрачность нашей навигационной кнопки.

Ну и, наконец, метод scrollBy(0, -document.body.scrollTop) вызывает прокрутку документа в окне браузера вправо (первый аргумент) и вниз (второй аргумент метода).

5. Задание: создай «плавающее» меню, которое при прокрутке документа всегда находится в правом верхнем углу окна, а при наведении указателя мышки «раскрывается», то есть изменяет свою высоту, и предоставляет в наше распоряжение ссылки:

и