Статьи о Marquee
Создание скриптов ускоряющих и замедляющих бегущую строку
Май 2009 г.
Достаточно известен скрипт останова автоскроллинга в тэге <marquee> наведением мышки (курсора) onmouseover="this.stop()" onmouseout="this.start()", но соответствующим образом делается скрипт замедление бегущей строки при наведении на неё мышкой, код будет выглядеть так:
<marquee id="slow" onmouseover="this.scrollDelay=400" onmouseout="this.scrollDelay=100" style="background-color:#9f6;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:#9f6;width:80%">БЕГУЩАЯ СТРОКА С УСКОРЕНИЕМ</marquee>Учитывая что в скорость скроллинга имеет две составляющие задержка и расстояние смещения монтирования, замедлять и ускорять можно с помощью функции монтирования, зададим начальное смещение в десять пикселей scrollamount="10" а замедление до максимально возможного т.е один пиксель onmouseover="this.scrollAmount=1":
<marquee scrollamount="10" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=10" style="background-color:#9f6;width:80%">ЗАМЕДЛЕНИЕ МОНТИРОВАНИЕМ</marquee>ну а для ускорения изменим с точностью наоборот:
<marquee scrollamount="1" onmouseover="this.scrollAmount=10" onmouseout="this.scrollAmount=1" style="background-color:#9f6;width:80%">УСКОРЕНИЕ МОНТИРОВАНИЕМ</marquee> В статье Старт и стоп в Marquee приведены примеры скриптов не только с остановом наведением мыши на строку, но и другие, например останов нажатием левой кнопки мыши, а запуск отпусканием. Всё то же самое можно использовать и для замедления и ускорения. Смотрим ускорение нажатием левой кнопки мыши onmousedown, при отпускании onmouseup, строка снова замедляется:
<marquee onmousedown="this.scrollAmount=10" onmouseup="this.scrollAmount=1" scrollamount="1" style="background-color:#9f6;width:80%">УСКОРЕНИЕ НАЖАТИЕМ ЛЕВОЙ КНОПКИ МЫШИ</marquee>При желании если есть такая необходимость можно совместить и скрипты остановки допустим с замедлением, т.е. замедляем наведением курсора, а останавливаем нажатием левой кнопки электронного грызуна:
<marquee scrollamount="10" onmousedown="this.stop()" onmouseup="this.start()" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=10" style="background-color:#9f6; width:80%;">ЗАМЕДЛЕНИЕ НАВЕДЕНИЕМ КУРСОРА, ОСТАНОВ НАЖАТИЕМ КНОПКИ</marquee>Управлять скоростью бегущей строки можно и формой, например дефолтной кнопкой, задать можно любое количество скоростей, для примера создадим трёхскоростную бегущую строку, назовем её speed-3, сценарий клика запишем командой объектной модели документа, что позволит этому примеру воспроизводится не только в Ишачке, но и в Огненном Лисе.
<marquee scrollamount="6" id="speed-3" style="background-color:#9f6;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 Апокриф веб-дизайна
