Ускорение и замедление в Marquee.

Ускорение и замедление в Marquee

Атрибуты Marquee Скорость Marquee Непрерывная бегущая строка

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

Май 2009 г.

Достаточно известен скрипт останова автоскроллинга в тэге <marquee> наведением мышки (курсора) onmouseover="this.stop()" onmouseout="this.start()", но соответсвующим образом делается скрипт замедление бегущей строки при наведении на неё мышкой, код будет выглядеть так:

<marquee id="slow" onmouseover="this.scrollDelay=400" onmouseout="this.scrollDelay=100" style="background-color:#99ff66; width:80%;">БЕГУЩАЯ СТРОКА С ЗАМЕДЛЕНИЕМ</marquee>

БЕГУЩАЯ СТРОКА С ЗАМЕДЛЕНИЕМ


дефолтная (по умолчанию) задержка отрисовки scrollDelay для разных версий браузеров приблизительно 60-80 миллисекунд, в данном примере замедляетсяя до 400 миллисекунд, а после того как мышь отведена от бегущей строки, текст отрисовывается с задержкой 100 миллисекунд, т.е. чуть медленнее чем дефолтная
Анологичен пример обратного действия - ускорение отрисовки контента, он же ускорение движения, скроллинга. Запишем в код задержку ниже дефолтной scrolldelay="400" и ускорим до 70 onmouseover="this.scrollDelay=70" идентификатор (якоррь) id="fast", а предыдущем код id="slow" вставлены для вызова в качестве пирмера на страницу о Невалидность Marquee:

<marquee id="fast" scrolldelay="400" onmouseover="this.scrollDelay=70" onmouseout="this.scrollDelay=400" style="background-color:#99ff66; width:80%;">БЕГУЩАЯ СТРОКА С УСКОРЕНИЕМ</marquee>

БЕГУЩАЯ СТРОКА С УСКОРЕНИЕМ

Учитывая что в скорость скроллинга имеет две состовляющие задержка и растояние смещения монтирования, замедлять и ускорять можно с помощью функции монтирования, зададим начальное смещение в десять пикселей scrollamount="10" а замедление до максимально возможного т.е один пиксель onmouseover="this.scrollAmount=1":

<marquee scrollamount="10" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=10" style="background-color:#99ff66; width:80%;">ЗАМЕДЛЕНИЕ МОНТИРОВАНИЕМ</marquee>

ЗАМЕДЛЕНИЕ МОНТИРОВАНИЕМ


ну а для ускорения изменим с точьностью наоборот:

<marquee scrollamount="1" onmouseover="this.scrollAmount=10" onmouseout="this.scrollAmount=1" style="background-color:#99ff66; width:80%;">УСКОРЕНИЕ МОНТИРОВАНИЕМ</marquee>

УСКОРЕНИЕ МОНТИРОВАНИЕМ


В статье Старт и стоп в Marquee приведены примеры скриптов не только с остановом наведением мыши на строку, но и другие, например останов нажатием левой кнопки мыши, а запуск отпусканием. Всё то же самое можно использовать и для замедления и ускорения. Смотрим ускорение нажатием левой кнопки мыши onmousedown, при отпускании onmouseup, строка снова замедляется:

<marquee onmousedown="this.scrollAmount=10" onmouseup="this.scrollAmount=1" scrollamount="1" style="background-color:#99ff66; width:80%;">УСКОРЕНИЕ НАЖАТИЕМ ЛЕВОЙ КНОПКИ МЫШИ</marquee>

УСКОРЕНИЕ НАЖАТИЕМ ЛЕВОЙ КНОПКИ МЫШИ


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

<marquee scrollamount="10" onmousedown="this.stop()" onmouseup="this.start()" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=10" style="background-color:#99ff66; width:80%;">ЗАМЕДЛЕНИЕ НАВЕДЕНИЕМ КУРСОРА, ОСТАНОВ НАЖАТИЕМ КНОПКИ</marquee>

ЗАМЕДЛЕНИЕ НАВЕДЕНИЕМ КУРСОРА, ОСТАНОВ НАЖАТИЕМ КНОПКИ


Управлять скоростью бегущей строки можно и формой, например дефолтной кнопкой, задать можно любое количество скоростей, для примера создадим трёхскоростную бегущую строку, назавём её speed-3, сценарий клика запишем командой объектной модели документа, что позлолит этому примеру воспроизодитья не только в Ишачке, но и в Огненном Лисе.


<marquee scrollamount="6" id="speed-3" style="background-color:#99ff66; width:80%;">
ТРЁХСКОРОСТНАЯ БЕГУЩАЯ СТРОКА
</marquee><br /><br />
<input type="button" value="медленно" onClick="document.getElementById('speed-3').setAttribute('scrollamount', 1, 0);" />
<input type="button" value="быстро" onClick="document.getElementById('speed-3').setAttribute('scrollamount', 16, 0);" />
<input type="button" value="нормально" onClick="document.getElementById('speed-3').setAttribute('scrollamount', 5, 0);" />


ТРЁХСКОРОСТНАЯ БЕГУЩАЯ СТРОКА



в начало статьи

Текст в Marquee Графика в Marquee Формы в Marquee Направление Marquee Поведение Marquee Бегущая строка JavaScript Индексация Marquee Невалидность Marquee Апокриф веб-дизайна

Карта сайта