Прокрутка
Современные операционные системы являются оконными системами. Каждая задача забирает на экране монитора не всю площадь, а только часть и оформляется как окно. Окно может иметь стандартный или не стандартный вид, важно что за пределами окна задача не работает. Переключение между задачами реализуется, в частности, активацией окон, то есть переносом курсора из одного окна в другое. Вероятно это наиболее оптимальная форма и пока не видно для нее никакой альтернативы. Хотя как раз данный сайт оформлен в альтернативном режиме, но это неважно. Внутри окна находится разнообразная информация, представленная разными объектами, все вместе я называю модным английским словом "контент". Очень часто площадь контента не совпадает с площадью окна и тогда операционная система автоматически предлагает линейки прокрутки. По английски "scrolling", но это слово я как раз буду переводить, так как слово прокрутка уже давно все понимают. Прокрутка -- это очень полезный инструмент, и для нетбуков приходится специально покупать мышь с колесиком, потому что тач-пад - это неудачное решение и, более того, в нем нет колесика, которое крутит контент.
Браузер тоже открывает окно и в нем тоже есть линейки прокрутки. А как сделать окно на сайте таким образом, чтобы контент в нем прокручивался автоматически. Это задача DHTML и она вполне решабельна. В этом разделе я покажу как программировать простые системы автоматической прокрутки. Но сначала немного истории. Одним из объектов HTML является тег <textarea>, который помещает на сайт окно с автоматической линейкой прокрутки, если текст (контент) вылезает за пределы окна. Но в данном случае контентом может быть только текст. Вы видите такой объект в каждой статье примеров, в том числе и здесь. В нем очень удобно показывать коды программ. Правда я выбираю размеры окна так, чтобы крутить ничего не приходилось. На самом деле объект <textarea> -- это элемент формы, а именно, текстовый редактор, и он дает возможность пользователю набрать любой текст, который затем может быть отправлен на родной сервер сайта для обработки. Для области div можно заказать блочную систему показа с фиксированными размерами блока и указать скроллинг если контент вылезает за размеры блока.
Более сложным объектом является тег <marquee>, который позволяет прокручивать контент с постоянной скоростью. Он имеет много параметров, регулирующих процесс прокрутки контента. Однако, если посмотреть в таблицу тегов, рекомендуемых W3C, то там нет такого тега. Этот тег является изобретением Майкрософт, который не стал стандартом языков HTML до версии 4.0. Первоначально этот тег работал только в Экплорере и не работал в других браузерах. Но постепенно другие браузеры тоже стали его исполнять, хотя это надо проверять в каждом конкретном случае отдельно. Вот я печатаю этот текст в редакторе Notepad2, который автоматически отмечает теги html другим цветом. Но данный тег он не признает. Я просто хочу сказать, что есть возможность прокручивать текст в окне и без javascript. Но с использованием javascript это можно делать намного более фасонно и разнообразно. Я сначала покажу самый простейший вариант кода, который иллюстрирует только принцип, идею. А использовать этот принцип можно с контентом любой степени сложности и варьировать параметры многими способами. Как обычно, я сначала покажу полный код сайта, содержащего объект, а потом расскажу что этот код означает. Код можно скопировать в отдельный файл и посмотреть. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь обсудим код. Стили CSS я уже не обсуждаю, они такие же как и в других примерах и здесь главное не в этом. На самом сайте поставлены две кнопки и блочная область с фиксированными размерами. Указано, что за пределами области контент не показывать. Внутрь области вставлена картинка, исходные размеры которой больше размеров области. Картинка поставлена по абсолютным координатам так, что ее левый верхний угол находится за пределами области. Следовательно мы видим только фрагмент картинки. Это тоже очень удобная система CSS форматирования, что реально на сайт можно выставить любой фрагмент картинки, а не только целиком всю картинку. Интересно, что если бы мы указали размеры картинки, равными размеру области, то она бы автоматически была промасштабирована на размер области. Можно было бы указать реальные размеры, но в нашем случае это не обязательно. А за картинкой записан текст в области div и тоже с абсолютным позиционированием. Текст записан внутри параграфа, параметры которого заданы нужным образом, то есть большими буквами и с большим интервалом между строками. А в конце кода по новой методике записан весь javascript код. Сначала описаны все переменные, затем три javascript функции. Отметим, что переменная mc равна указателю на параметр style объекта с заданным значением параметра id. В конце запускается функцию move(). Такой стиль программирования типичен для анимированных сайтов. Если переменная является ссылкой на объект, то сначала надо создать объект, а уже потом определять переменную-ссылку на этот объект. Именно поэтому javascript код записывается в конце.
Хотя в самой функции эта переменная может использоваться и без определения и ее можно было бы написать и в начале. В этом есть отличие Javascript от Java. В Java нельзя оперировать ни одной переменной, которая еще не определена. А в Javascript совсем не обязательно вообще определять переменные. Считается, что все переменные как-бы изначально определены, а более полное их определение происходит в момент присвоения им значений. По этой причине строка var pt,pts,ptma,ptmi,pause; вообще не обязательна и пишется программистами по инерции, так как это обязательно в других языках. Рассмотрим какие объекты у нас на сайте. У нас три объекта: две кнопки и область div, для которой задано относительное расположение, блоковая структура, нулевые координаты смещения, а также ширина и высота. За пределами области ее контент не виден, а по краям она имеет золотую рамку. Это стандартные параметры окна на сайте. Таких окон на сайте можно открыть много и они способны решать самостоятельные задачи, все точно так же, как в операционной системе. Можно варьировать размеры, рамку, расположение, но важно, что структура блоковая и за пределами области ничего не видно.
А внутри области задана картинка, размеры которой как раз больше области, поэтому она задана со сдвигом и видна только ее часть. Адрес этой картинки указывает на интернет, так что если компьютер не в сети, то ее не будет видно. Затем задана другая область, координаты которой уже заданы абсолютно, то есть относительно левого верхнего края области - ее контейнера, то есть нашего окна. Нулевые координаты означают, что левый верхний угол области совпадает с левым верхним углом ее окна, то есть внешнего тега div. Но у нас задано смещение на 50 пикселей по обоим координатам. Никаких других параметров не требуется, то есть эта область полностью определяется тем, что внутри нее. Ее размеры автоматически таковы, чтобы вместить весь контент, а рамки нет. Ну а внутри второй области div записан параграф текста со специфическими параметрами форматирования. Вот и все. Теперь подумаем как это работает. Сразу после загрузки сайта запускается функция move(). Но она ничего не делает, так как логическая переменная ona имеет ложное значение. Чтобы функция заработала, надо кликнуть кнопку [Start], которая вызовет функцию Startf(), а та изменит значение переменной на истинное. В этот момент функция начинает действовать. Она изменяет верхнюю координату области, точнее переменную, которая потом присваивается верхней координате области. Проверяет ее значение на соответствие максимальному и минимальному значениям, и если условия не выполняются, то знак шага изменения координаты меняется на противоположный. Оператор mc.top=pt фактически задает новую координату области с параметром id="mc";. В момент его выполнения координата области принимает новое значение, то есть область смещается, а вместе с ней и весь ее контент. Вот и все чудеса. Ну а следующую функцию
Я надеюсь, что читатель со мной согласится, что ведь ничего сложного нет, очень простой код, очень простая арифметика и очень простая структура сайта. А возможности намного превышают возможности статического форматирования страницы. Теперь немного порассуждаем как можно модифицировать код. Во первых, можно увеличить размер шага движения, и сделать его равным вертикальному размеру окна, но делать всего один шаг при каждом клике на кнопке. Таким образом, в окне будет появляться все время новый кусок текста. Ну а это уже "book reader", то есть электронная книга. С такой программой можно читать книги, перелистывая страницы по клику на кнопке. Кнопки могут задавать перескоки вперед и назад. А если вместо текста выставить картинки или фотографии одинакового вертикального размера в вертикальную таблицу, то можно перелистывать фотографии. Вертикальная таблица сама образуется если после каждой картинки поставить тег перевода на новую строку. Можно комбинировать картинки и текст. Можно делать переменный шаг таким образом, чтобы сначала показывать картинку, а потом приставлять к ней подпись. Или скажем загадывать загадки, а потом показывать отгадку. Короче, программирование -- это искусство, точнее творчество, вам дают инструмент и каждый может запустить фантазию как этим инструментом воспользоваться. Более сложные примеры анимации я покажу позднее. Здесь же просто отмечу, что можно показать картинку птицы в полете и двигать картинку на небольшое расстояние в разные стороны или вверх вниз. И птица начнет летать. А если набрать огромное количество кадров и менять их мгновенно с интервалом 24 кадра в секунду, то и кино можно показывать. Правда это примитивный метод, так ведь и код примитивный, но совсем небольшой сюжет мультипликации потянет.
Автор: Виктор Кон, 9.09.2013
