КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Чертёж одиннадцатый 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. Задание: создай «плавающее» меню, которое при прокрутке документа всегда находится в правом верхнем углу окна, а при наведении указателя мышки «раскрывается», то есть изменяет свою высоту, и предоставляет в наше распоряжение ссылки:
и 
|
|
|
|
|
Дата добавления: 2014-11-16; Просмотров: 322; Нарушение авторских прав?; Мы поможем в написании вашей работы!