Урок 13. Управление шрифтами в CSS
New Page 1
Java Script(JS): Прокрутка фреймов. Продолжение.
Исходники к уроку можно скачать
здесь.
Для
углубленного изучения web-программирования (язык
PHP и написание своей собственной CMS) советую
подписаться на
платный раздел (см. анонсы раздела "Пишем
Easy CMS") и
Разработка сервиса сайта на PHP на примере партнерской программы).
На прошлом
уроке мы изучили метод scrollTo, при помощи которого можно прокручивать фреймы.
Сегодня изучим другие методы объекта Windows,
позволяющие осуществить прокрутку.
Метод
scrollBy. Делает прокрутку относительно текущего положения. Для примера
возьмем исходники
прошлого урока
и слегка изменим файл jacket_wares.html:
<html>
<head>
<title>Выбор
товарной группы</title>
</head>
<body>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
select_ware(x,y) {
parent.picture.scrollTo(x,y)
}
function
up() {
parent.picture.scrollBy(0,-50)
}
function
down() {
parent.picture.scrollBy(0,50)
}
</SCRIPT>
<a
href="javascript:select_ware(0,0)">Куртка
красная</a><br>
<a
href="javascript:select_ware(0,500)">Куртка
черная</a><br>
<a
href="javascript:select_ware(0,1000)">Куртка
синяя</a><br>
<a
href="javascript:select_ware(0,2000)">Куртка
кожаная</a><br>
<a
href="javascript:select_ware(0,2500)">Куртка
джинсовая</a><br>
<br><br>
<a
href="javascript:up()">Вверх</a><br>
<a
href="javascript:down()">Вниз</a><br>
</body>
</html> |
Теперь
при просмотре списка товаров из группы "Куртки" у нас появились две ссылки:
"вверх" и "вниз", которые прокручивают картинку на 50 пикселей.
Вместо scrollToможно
использовать и такую запись:
parent.picture.document.body.scrollTop=y
parent.picture.document.body.scrollLeft=x |
Казалось бы,
слишком громоздко. Однако, поля scrollTop и scrollLeft можно не только задавать
но и читать. Проиллюстрируем это на примере. Для этого файл index.html из
нашего примера немножко видоизменим, присобачив к фрейму picture обработчик
события OnScroll:
<html>
<head>
<title>Урок
97. Java Script (JS):
Фреймы</title>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
init() {
wares.document.write("<h3>Выберите
товарную
группу,
что
бы
увидеть
список
товаров</h3>");
descr.document.write("<h3>Выберите
товарную группу или товар, что бы увидеть описание</h3>");
picture.onscroll =
function
() {
groups.document.getElementById("info").innerHTML=picture.document.body.scrollTop
}
}
</SCRIPT>
</head>
<frameset
rows="80%,
*"
ONLOAD="init()">
<frameset
cols="15%,
20%, *">
<frame
Name="groups"
src="groups.html">
<frame
Name="wares"
src="javascript:void(0)">
<frame
Name="picture"
src="picture.html">
</frameset>
<frame
Name="descr"
src="javascript:void(0)">
</frameset>
</html> |
Так же чуть
чуть изменим файл groups.html, добавив элемент с id
равным info:
<html>
<head>
<title>Выбор
товарной группы</title>
</head>
<body>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
selectGroup(group) {
parent.wares.location.href=group+"_wares.html"
parent.descr.location.href=group+".html"
parent.picture.document.images[0].src=group+".jpg"
}
</SCRIPT>
<h4>Выберите
товарную группу,<br> которую вы хотите просмотреть.</h4>
<a
href="javascript:selectGroup('jacket')">Куртки</a><br>
<a
href="javascript:selectGroup('suit')">Костюмы</a><br>
<a
href="javascript:selectGroup('dress')">Платья</a><br>
<a
href="javascript:selectGroup('sarafan')">Сарафаны</a><br>
<br>
<br>
<div
id="info"></div>
</body>
</html> |
Все, теперь
при прокрутке картинки у нас будет показывать позицию по вертикали:
|