Бегущая строка в статусной строке. Java Script


Бегущая строка в статусной строке. Java Script

  • Регистрация доменного имени в зоне .ru
  • Хостинг (1 год)
  • Индивидуальный дизайн
  • Поддержка РНР,MySQL
  • От 5 до 14 страниц сайта
  • Система управления сайтом,вы сами можете менять содержимое
  • Форма сообщений
  • Заказать

Недорогой но высококачественный сайт. Такое может быть? Да. У нас может быть всё. Достойное качество по доступной цене.
С точки зрения нашей студии создание сайта недорого значит, прежде всего, отменно, технологично и потом уже — недорого.
Удаленная форма работы с клиентами оптимизирует наши расходы и мы можем делать сайты по всему миру. Вам совсем не нужно приезжать к нам. Мы сэкономим Ваше время и средства.

В столь непростое время глобального финансового кризиса, когда отмирают старые схемы бизнеса, появляются новые. Самое лучше время для начала своей деятельности. Вы начинаете свой бизнес, а я помогу создать вам свой сайт очень недорого, для вас.
Огромной популярностью пользуются так называемые сайты-визитки.
Создание сайта-визитки — это совсем недорого, и будет по карману даже начинающему предпринимателю. При разработке подобного сайта достаточно небольшого бюджета.

JavaScript (Java-скрипт, яваскрипт) — язык обработки сценариев, позволяющий выполнять на компьютере пользователя определенные действия с HTML-страницами и объектами, размещенными на ней. JavaScript (яваскрипт, ява скрипт, джаваскрипт, джава скрипт, js, jscript, ECMAScript) — объектно-ориентированный язык программирования. Интерпретатор (выполняется пошагово). В отличии от PHP выполняется не на сервере, а на клиенте (в браузере). Не требует специальной установки и настройки, поддерживается всеми современными браузерами, однако, в некоторых случаях может быть отключен по соображениям безопасности. Обычно используется для интерактива (небольших вычислений, проверки введенных значений, анимации и т.д.). Является частью технологии Ajax.

В сети много различных справочников JavaScript с примерами, но очень немногие описывают, а особенно показывают каков будет результат и вот решил создать on-line справочник, разбитый на категории и рубрики.У меня часто возникала проблема какие-то скрипты идут в Internet Explorer и Opera, а в FireFox не работают, сделал подборку скриптов, которые работают в этих трёх браузерах.

Бегущая строка с помощью CSS Animations

Написать комментарий:

  • © 2020, 4X_Pro
  • Правила
  • Обо мне
  • Все проекты
  • Достижения

Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.

Бегущая строка в html | Тег

Бегущая строка— элемент в веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.

В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.

Как сделать бегущую строку html на сайте

Создать бегущую строку не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html , сначала специально для для браузера Internet Explorer, а затем и все остальные браузеры начали обрабатывать и поддерживать тег.

Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!

К примеру, что бы текст двигался справа налево нужно вставить код:

Тут вставляем текст бегущей строки

Тут вставляем текст бегущей строки

Приветствие:

Hello,my name is Galya

В принципе бегущую строку можно вставить куда душа пожелает: в футер, сайдбар, под шапкой блога или в саму шапку.

Можно настроить бегущую строку добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right

Бегущая строка cлева направо

Что бы текст не исчезал за границы и двигался туда-сюда нужно добавить атрибут behavior со значением alternate

Бегущая строка перемещается между правым и левым краем

Бегущая строка перемещается между правым и левым краем

Цветная бегущая строка перемещается между правым и левым краем

Туда-сюда на цветном фоне

Бегущая строка останавливается при наведении

Бегущая строка останавливается при наведении

Бегущая строка останавливается при наведении

А теперь добавим стили css и украсим нашу бегущую строку, получится цветная бегущая строка:

color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Цветная бегущая строка

Цветная бегущая строка

Цветная бегущая строка движется слева направо:

Цветная бегущая строка слева направо

Цветная бегущая строка слева направо

Настройки:

color: #ad0dd9 — цвет текста бегущей строки
font-size: 20px — размер шрифта

Сделаем бегущую строку на цветном фоне:

Бегущая строка на цветном фоне

Бегущая строка на цветном фоне

bgcolor— цвет фона
Цветная бегущая строка

Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:

direction=»up» style=»color:#f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка снизу вверх

Бегущая строка снизу вверх

И сразу же добавим еще один атрибут heigh и настроим высоту блока:

height=»150″ direction=»up» style=»color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка

Настройки:

height=»150″ — высота блока

color:#0F9D58 — цвет текста бегущей строки

font-size: 30px- размер шрифта

А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down

height=»150″ direction=»down» style=»color:#1C3850; font-size: 20 px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка сверху вниз

Бегущая строка сверху вниз

Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay :

scrolldelay=»60″ style=»color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка

Настройка:

scrolldelay=»60″ — изменяем цифры и устанавливаем свою скорость прокрутки

Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height.

height — это высота блока

scrollamount — атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.

height=»150″ scrollamount=»3″ style=»border: 2px sol >w > Бегущая строка в рамочке

Бегущая строка в рамочке

Сделаем бегущую строку в рамочке на цветном фоне: добавим атрибут bgcolor

bgcolor=»#e20b0b» direction=»down» height=»150″ scrollamount=»2″ style=»border: 2px sol >Бегущая строка в рамочке на цветном фоне

Бегущая строка в рамочке на цветном фоне

Бегущая строка в html с картинками

Картинка движется справа налево:

Картинка в бегущей строке слева направо:

Картинка сверху вниз:

Изображение и текст в бегущей строке:

Приятно было познакомиться! Заходите ещё!

Ссылка на картинку — https://yablogger.info/wp-content/uploads/2020/04/oe_4f64887337494ff581c5168e37bc4d51.gif

Вставляем картинку на сайт в черновик и в html редакторе находим url картинки или загружаем на специализированный ресурс для публикации изображений на сайтах, блогах, чатах и берем оттуда ссылку.

Как вставить ссылку в бегущую строку

Хотите узнать как сделать из блога сайт? Читать подробнее

Илон Маск рекомендует:  Что такое код declare table

Как вставить бегущую строку в Blogger (Blogspot)

  1. В редакторе сообщений открываем вкладку НTML и вставляем код. Вначале редактируем текст, потом добавляем код и сразу Публикуем. В визуальный редактор переходить не надо, слетят все настройки, результат смотрите на блоге.
  2. Панель инструментов > Дизайн > Добавить гаджет > HTML/JavaScript, добавляем код.
  3. Вставить гаджет в шапку над названием и описанием блога.

Как добавить бегущую строку в WordPress

В записи открываем Html редактор или вкладку «Текст» вставляем код бегущей строки и нажимаем «Опубликовать«. Редактировать статью только в этих вкладках, в визуальном редакторе настройки слетают и придется делать все сначала. Если изменения в статье сделать необходимо, заходим через Консоль > Все записи > Изменить. В такой последовательности открывается запись в html редакторе.

Добавляем бегущую строку в боковую колонку: Консоль > Внешний вид > Виджеты > Текст > Добавить виджет. Вставляем код и сохраняем.

Бесконечная бегущая горизонтальная строка контента на jQuery

Зачастую контент на вашем сайте велик и вам хочется уместить его на первом экране. Что ж, решение есть – это поместить его в бегущую строку.

Что такое бегущая строка? Это некая область, отведенная под контент, который в прямом смысле пробегает в этой области.

Что в нашем случае мы подразумеваем под «бесконечной»? Это значит, что если контент в строке закончится, то цикл прокрутки начнется заново, и так без остановки.

Реализация этой бегущей строки – следующая.

1. Скачайте архив в конце статьи, содержимое загрузите на ваш сайт в удобную для вас папку.

Бегущая строка в статусной строке. Java Script

Библиотека: скачать готовые скрипты Javascript
Бегущая строка в строке статуса состояния Status Bar (динамическая)

Лучше один раз увидеть, чем сто раз прочитать об этом. Посмотрите вниз страницы. Вы можете прочитать бегущую строку внизу этой веб-страницы в строке состояния как наглядный пример работы скрипта (строка состояния Status Bar должна быть включена в браузере). Вот скрипт бегущей строки, но работает не везде. Скорость регулируется параметром.

Наши ссылки на веб-страницы, можно скопировать html-код ссылки

Книги по математике и физике, программы HTML, компьютерные технологии
Скачать JavaScript — бесплатно скрипты JavaScript (коллекция программ на JavaScript)

Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта. Материал носит неофициальный характер и приведен для ознакомления.

Бегущая строка в текстовом поле INPUT

Согласитесь, что бегущая строка в текстовом поле не только привлечет внимание посетителя Вашей странички, но и будет весьма полезной, т.к. может содержать в себе необходимую подсказку по данным, которые необходимо ввести в данное поле.

Пример подобной бегущей строки в текстовом поле Вы можете наблюдать чуть ниже:

Почему-то данный способ подсказок для заполнения текстовых полей не получил широкого распространения и далеко не на каждом сайте можно встретить подобный визуальный эффект. Чаще используется атрибут placeholder, который создает статичную подсказку.

Для того чтобы получить подобную бегущую строку в поле текстовом INPUT, воспользуйтесь JavaScript кодом, приведенном ниже (поместите его в начало Вашей странички):

Далее необходимо добавить форму с текстовым полем INPUT:

Ну и в конце необходимо вызвать прописанную ранее функцию m_line() для того, чтобы наша бегущая строка «ожила»:

Как видите, ничего сложного в данном JavaScript коде нету, но зато как эта бегущая строка эффектно смотрится по сравнению со статичной подсказкой.

Обратите внимание, что если кликнуть по данному текстовому полю, то скрипт бегущей строки автоматически остановится, и не будет мешать пользователю при вводе данных в поле. Если кликнуть в какое-нибудь другое место странички, то скрипт вновь возобновит свою работу и будет отображать бегущую строку. Если Вам необходимо отключить возобновление показа бегущей строки (когда поле было создано не для подсказки, а для отправки данных), то просто удалите onBlur=m_line(); из кода поля input.

Про бегущую строку в текстовом поле INPUT с изменяющимся текстом можно посмотреть в соседней теме — INPUT с изменяющимся текстом.

Wiki-учебник по веб-технологиям: JavaScript/СтрокаСостояния .

Ваши программы JavaScript могут писать в строку состояния – это область снизу вашего окна браузера. Все, что вы должны сделать, это указать строку в window.status. Следующий пример показывает вам две кнопки, которые могут использоваться, чтобы записать в строку состояния и опять стереть текст.
Сценарий выглядит следующим образом:

Мы создаем форму с двумя кнопками. Обе кнопки вызывают функцию statbar(). Посмотрите, как выглядит обращение к функции, созданное кнопкой Write!:

Внутри скобок мы определяем строку "Hi! This is the statusbar!" Это значит, что строка передаётся в функцию statbar(). Вы видите, что мы определили функцию statbar(), как показано ниже:

Что является новым – то, что мы используем txt внутри скобок имени функции. Это означает строка, которую мы передали в функциу, сохранена в переменной txt. Передача переменных в функции – часто используемый путь для создания более гибких функций. вы можете передавать несколько значений в функции – вы только должны отделить их через запятые.

Строка txt отображается в строке состояния через window.status = txt.
Стирание текста в строке состояния — достигаеться через задание пустой строки в window.status.

Показ текста в строке состояния может легко использоваться в комбинации с ссылками. Вместо того, чтобы показывать URL связи вы можете объяснять на словах, относительно чего следующая страница. Эта ссылка показывает это – только переместите ваш курсор поверх ссылки. Код для этого примера выглядит следующим образом:

Здесь мы используем onMouseOver и onMouseOut, чтобы обнаружить, когда курсор перемещается поверх ссылки.

Вы можете задать вопрос, почему мы должны писать return true внутри свойства onMouseOver. Это означает, что браузер не будет выполнять собственный код как реакцию на событие MouseOver. Обычно браузер отображает URL ссылки в строке состояния. Если мы не используем return true, браузер будет писать в строку состояния сразу после того, как наш код был выполнен – это означает, что браузер записало поверх нашего текста, и пользователь не смог бы прочитать его. В общем, мы можем подавить такие действия браузера, используя return true в обработчике событий.

onMouseOut не существовал в JavaScript 1.0. Вы можете получить различные результаты на различных платформах. На Unix платформах например текст исчезнет даже при том, что браузер не знает onMouseOut. В Windows текст останется. Если вы хотите, чтобы ваш сценарий был совместимым, вы могли бы например писать функцию, которая пишет текст в строку состояния и стирает этот текст после некоторого периода времени. Это программируется с использованием таймаутов. Мы узнаем больше относительно таймаутов в следующем разделе.

В этом сценарии вы можете видеть другую вещь – иногда вы хотите вывести кавычки. Мы хотим вывети строку Don't click me — поскольку мы определяем эту строку внутри onMouseOver обработчика событий, мы используем одиночные кавычки. Но слово Don't тоже использует одиночную кавычку! Броузер запутается, если вы просто напишете 'Don't . '. Чтобы решить эту проблему, вы можете просто написать наклонную черту влево \ перед кавычкой – что означает, что она принадлежит выводу (вы можете проделать тоже самое с двойными кавычками « ).

Бегущая строка в статусной строке. Java Script

Объект window имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна, содержимое строки состояния окна и другие:

Свойство Описание
frames Массив всех фреймов данного окна
length Количество фреймов в родительском окне
name Имя окна, указанное при его открытии методом open, а также в параметре TARGET оператора или в параметре NAME оператора

В области заголовка документа определена функция CloseNavWnd: Эта функция выводит на экран диалоговое окно с просьбой подтверждения закрытия окна и в случае утвердительного ответа обращается к методу close, закрывающему текущее окно. При вызове метода close браузер может еще раз запросить разрешение на закрытие. Если на вопрос ответить утвердительно, то окно будет закрыто.

Кнопка, закрывающая окно, добавляется на страницу следующим образом (более подробно подобные элементы будут рассмотрены позже, в разделе «Формы»):

Для того чтобы функция CloseNavWnd вызывалась после того как пользователь нажимает кнопку, в строке определения этой кнопки указан обработчик события onClick.

Открываем новое окно

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

В этом окне расположена кнопка «Open Hello window». Если нажать на эту кнопку, будет создано еще одно окно браузера, в которое загрузится содержимое файла hello.html. Однако внешний вид этого окна будет несколько необыче: в окне нет ни полос просмотра, ни меню, ни инструментальной линейки. Дело в том, что при создании этого окна в нашем сценарии было указано, что перечисленные выше элементы пользовательского интерфейса отображать не нужно. Кроме того, были определены точные размеры окна.

Если закрыть окно первого документа, на экране появится диалоговая панель с прощальным приглашением.

Исходные тексты документов представлены ниже:

Листинг 2.4. Основной документ

Когда пользователь нажимает кнопку «Open Hello window», определенную в форме, вызывается функция OpenHelloWnd. Эта функция открывает новое окно браузера, загружая в него новый документ HTML. Окно открывается следующим образом:

В качестве первого параметра методу open передается адрес URL документа HTML, который должен быть загружен в окно. Второй параметр определяет имя окна (в данном случае не задано), а третий — определяет параметры окна.

Бегущий текст в строке состояния браузера

Рассмотрим еще одну очень распространенную задачу — отображение бегущего текста в строке состояния браузера. Строка состояния обычно используется браузерами для отображения различной информации, например, информации о выполнении текущей операции. Для того чтобы записать что-нибудь в строку состояния, необходимо изменить содержимое свойства status объекта window окна браузера. Эту задачу можно решить, например, так:

Для создания эффекта бегущей строки операцию обновления свойства status необходимо выполнять периодически, отображая текст с изменяющимся сдвигом. Однако не стоит делать это в цикле, так как в результате нормальная работа браузера будет нарушена.

В нашем сценарии применен способ выполнения периодических процедур, основанный на использовании метода setTimeout, определенного для объекта window. Этот метод позволяет организовать отложенное во времени выполнение команды, заданной первым параметром. Время, через которое команда будет запущена, указывается методу setTimeout вторым параметром.

Листинг 2.5.

Функция sscroll вызывается первый раз в теле документа:

В дальнейшем функция sscroll организует при помощи метода setTimeout свой собственный вызов, отложенный во времени на 50 миллисекунд, и завершает работу. Однако через указанное время функция будет вызвана вновь, и это будет продолжаться до тех пор, пока документ HTML, содержащий сценарий, остается загруженным в окно браузера. Упрощенно структура функции sscroll показана ниже: После отображения сообщения в строке состояния и сдвига этого сообщения влево на одну позицию функция sscroll вызывает метод setTimeout, передавая ему через первый параметр переменную с командой, подлежащей выполнению, а через второй — время задержки, по прошествии которого данную команду нужно будет выполнить. В качестве выполняемой команды методу setTimeout указывается вызов функции sscroll. Таким образом эта функция вызывается периодически.

В функции sscroll определены три локальные переменные. Переменная cmd хранит команду вызова функции sscroll. В переменной szOut подготовлен текст, отображаемый в строке состояния браузера при каждом вызове функции sscroll. Текстовая переменная szText используется как рабочая. В ней формируется сообщение для вывода. Вначале в переменную szText записывается nSpace пробелов, а затем добавляется строка szMsg:

Для того чтобы при каждом вызове функции sscroll сообщение отображалось со сдвигом на одну позицию, из переменной szText извлекается подстрока. Извлечение подстроки выполняется с помощью метода substring, определенного во встроенном классе текстовых строк String. Полученная подстрока записывается в свойство status объекта window и таким образом отображается в строке состояния: Первый параметр метода substring определяет начальную позицию подстроки внутри строки, а второй — конечную. После отображения сообщения функция sscroll увеличивает значение глобального счетчика nIteration на единицу: Когда в результате сдвига сообщение полностью уходит из строки состояния, счетчик nIteration снова устанавливается в нулевое значение: Обратите внимание, что общая длина сдвигаемой строки здесь вычисляется как сумма значения nSpace (количество начальных пробелов) и длины сообщения szMsg. Последняя определяется с помощью метода length, определенного во встроенном классе String.

Загрузка нового документа HTML в окно браузера

Сценарий, рассмотренный в данном примере, позволяет отразить новый документ в текущем окне браузера. При нажатии на кнопку «Переход» сценарий запрашивает адрес URL и производит переход на новую страницу

Строка в JavaScript. Работа со строками в JavaScript

Дата публикации: 2020-11-04

От автора: приветствую вас, друзья. В нескольких предыдущих статьях мы с вами знакомились с числовыми типом данных в JavaScript и работали с числами. Теперь пришло время работы со строками в JavaScript. Давайте ближе познакомимся со строковым типом данных в JavaScript.

В статье о типах данных в JavaScript мы с вами уже вскользь познакомились с типом строка и, по сути, мы лишь узнали, что такое строка и как она записывается. Давайте теперь поближе познакомимся со строками и методы работы с ними.

Как вы помните, любой текст в JavaScript является строкой. Строка обязательно должна быть заключена в кавычки, одинарные или двойные, без разницы:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Сейчас мы записали в переменные всего по одному слову. А что если мы хотим записать большой объем текста? Да без проблем, давайте запишем в переменную какой-нибудь рыбный текст и выведем его в консоль:

Работает. Но если текста много, у нас наверняка будут переносы строк, чтобы начинать новый абзац с новой строки. Давайте попробуем добавить такой перенос строки в наш текст:

Как видим, мой текстовый редактор уже подсветил красным цветом возможную проблему. Давайте посмотрим, как на перевод строки в такой интерпретации среагирует браузер:

Синтаксическая ошибка, как и следовало ожидать. Как же быть? Записать в переменную многострочный текст можно несколькими способами. Об одном из них вы даже уже могли догадаться, речь идет о конкатенации строк:

Как видим, редактор уже нормально реагирует на такой вариант записи строки в переменную. Другой вариант — использование обратного слеша (\), который в JavaScript и во многих других языках программирования является экранирующим символом, позволяющим безбоязненно работать со спецсимволами. Что такое спецсимволы мы узнаем далее. Итак, попробуем экранировать невидимый символ перевода строки:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Экранирование также решило нашу проблему. Однако, если мы заглянем в консоль, то и конкатенация строк, и экранирования перевода строки, решив проблему записи в программу, не решило проблему с выводом многострочной строки на экран. Вместо многострочной строки мы увидим в консоли текст в одну строку. Как быть?

И здесь нам поможет специальный символ новой строки — \n. Добавив этот спецсимвол в строку в нужном месте, мы скажем интерпретатору, что в этом месте необходимо завершить текущую строку и сделать переход на новую строку.

Всё для веб-мастера • Сайт вебмастеров

Составленные Вами программы на JavaScript могут выполнять запись в строку состояния — прямоугольник в нижней части окна Вашего браузера. Все, что Вам необходимо для этого сделать — всего лишь записать нужную строку в window.status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать.

Данный скрипт выглядит следующим образом:

Итак, мы создаем форму с двумя кнопками. Обе эти кнопки вызывают функцию statbar(). Вызов от клавиши Писать! выглядит следующим образом:

В скобках мы написали строку: ‘Привет! Это окно состояния!’. Это как раз и будет текст, передаваемый функции statbar(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:

В заголовке функции в скобках мы поместили слово txt. Это означает, что строка, которую мы передали этой функции, помещается в переменную txt.

Передача функциям переменных — прием, часто применяемый для придания функциям большей гибкости. Вы можете передать функции несколько таких аргументов — необходимо лишь отделить их друг от друга запятыми.

Строка txt заносится в строку состояния посредством команды window.status = txt.

Соответственно, удаление текста из строки состояния выполняется как запись в window.status пустой строки.

Механизм вывода текста в строку состояния удобно использовать при работе со ссылками. Вместо того, чтобы выводить на экран URL данной ссылки, Вы можете просто на словах объяснять, о чем будет говориться на следующей странице. Так link демонстрирует это — достаточно лишь поместить указатель вашей мыши над этой ссылкой: Исходный код этого примера выглядит следующим образом:

Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой.

Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что браузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад — то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.

в JavaScript 1.0 процедура onMouseOut еще не была представлена. И если Вы пользуетесь Netscape Navigator 2.x, то возможно на различных платформах Вы можете получить различные результаты. Например, на платформах Unix текст исчезает даже несмостря на то, что браузер не знает о существовании процедуры onMouseOut. В Windows текст не исчезает. И если Вы хотите, чтобы ваш скрипт был совместим с Netscape 2.x для Windows, то можете, к примеру, написать функцию, которая записывает текст в окно состояния, а потом стирает его через некоторый промежуток времени. Программируется это с помощью таймера timeout. Подробнее работу с таймерами мы рассмотрим в одном из следующих параграфов.

В этом скрипте Вы можете видеть еще одну вещь — в некоторых случаях Вам понадобится печатать символы кавычек. Например, мы хотим напечатать текст Don’t click me — однако поскольку мы передаем эту строку в процедуру обработки события onMouseOver, то мы используем для этого одинарные кавычки. Между тем, как слово Don’t тоже содержит символ одинарной кавычки! И в результате если Вы просто впишете ‘Don’t . ‘, браузер запутается в этих символах ‘. Чтобы разрешить эту проблему, Вам достаточно лишь поставить обратный слэш \ перед символом кавычки — это означает, что данный символ предназначен именно для печати. (То же самое Вы можете делать и с двойными кавычками — «).

С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд.

Скрипт выглядит следующим образом:

Здесь setTimeout() — это метод объекта window. Он устанавливает интервал времени — я полагаю, Вы догадываетесь, как это происходит. Первый аргумент при вызове — это код JavaScript, который следует выполнить по истечении указанного времени. В нашем случае это вызов — «alert(‘Врем\я истекло!’)». Обратите пожалуйста внимание, что код на JavaScript должен быть заключен в кавычки.

Во втором аргументе компьютеру сообщается, когда этот код следует выполнять. При этом время Вы должны указывать в миллисекундах (3000 миллисекунд = 3 секунда).

Теперь, когда Вы знаете, как делать записи в строке состояния и как работать с таймерами, мы можем перейти к управлению прокруткой. Вы уже могли видеть, как текст перемещается строке состояния. В Интернет этим приемом пользуются повсеместно. Теперь же мы рассмотрим, как можно запрограммировать прокрутку в основной линейке. Рассмотрим также и всевозможные усовершенствования этой линейки.

Создать бегущую строку довольно просто. Для начала давайте задумаемся, как вообще можно создать в строке состояния перемещающийся текст — бегущую строку. Очевидно, сперва мы должны записать в строку состояния некий текст. Затем по истечении короткого интервала времени мы должны записать туда тот же самый текст, но при этом немного переместив его влево. Если мы это сделаем несколько раз, то у пользователя создастся впечатление, что он имеет дело с бегущей строкой.

Однако при этом мы должны помнить еще и о том, что обязаны каждый раз вычеслять, какую часть текста следует показывать в строке состояния (как правило, объем текстового материала превышает размер строки состояния).

Эта кнопка откроет окно и покажет образец прокрутки:

Итак, исходный код скрипта — я добавил к нему еще некоторые комментарии:

Большая часть функции scroll() нужна для вычленения той части текста, которая будет показана пользователю. Я не буду объяснять этот код подробно — Вам необходимо лишь понять, как вообще осуществляется эта прокрутка.

Чтобы запустить этот процесс, мы используемся процедурой обработки события onLoad, описанной в тэге . То есть функция scroll() будет вызвана сразу же после загрузки HTML-страницы.

Через посредство процедуры onLoad мы вызываем функцию scroll(). Первым делом в функции scroll() мы устанавливаем таймер. Этим гарантируется, что функция scroll() будет повторно вызвана через 100 миллисекунд. При этом текст будет перемещен еще на один шаг и запущен другой таймер. Так будет продолжаться без конца.

В Netscape Navigator 2. x с таким типом скроллинга были некоторые проблемы — его выполнение иногда приводило к появлению ошибки ‘Out of memory’. Я получил много писем, где объяснялось, что это возникает вследствие рекурсивного вызова функции scroll(), что в конце концов приводит к выходу за пределы памяти. Но это не так. Данный вызов функции не является рекурсивным! Рекурсию мы получим, если будем вызывать функцию scroll() непосредственно внутри самой же функции scroll(). А этого здесь мы как раз и не делаем. Прежняя функция, установившая таймер, закончивается еще до того, как начинается выполнение новой функции. Проблема же состояла в том, что в действительности мы не могли в JavaScript выполнять коррекцию строк. И если Вы пробуете сделать это, то JavaScript просто-напросто создавал новый объект — но при этом не удалял старый. Именно таким образом происходило переполнение памяти.

Скроллинг используется в Интернет довольно широко. И есть риск, что быстро он станет непопулярным. Я должен признаться, что и сам не очень его люблю. В большинстве страниц, где он применяется, особенно раздражает то, что из-за непрерывного скроллинга становится невозможным прочесть в строке состояния адрес URL. Эту проблему можно было бы решить, позаботившись о приостановке скроллига, если происходит событие MouseOver — и, соответственно, продолжении, когда финсируется onMouseOut. Если Вы хотите попытаться создать скроллинг, то пожалуйста не используйте стандартный его вариант — пробуйте привнести в него некоторые приятные особенности. Возможен вариант, когда одна часть текста приходит слева, а другая — справа. И когда они встречаются посередине, то в течение некоторых секунд текст остается неизменным. Воспользовавшись небольшой долей фантазии, Вы конечно же сможете найти еще несколько хороших альтернатив.

Илон Маск рекомендует:  Что такое код mcrypt_cbc
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL