Еще один интересный скрипт из буржуйского интернета - позволяет сделать на странице эффект «бегущей строки» из блоков текста, изображений и других элементов HTML. Имеет большое количество настроек, но самое интересное, на мой взгляд, - это возможность управлять бегущей строкой с помощью указателя мышки.
Демонстрация
(перемещайте указатель мышки «влево» «вправо», тем самым изменяя направление и скорость движения бегущей строки)
Скрипт бегущей строки - вы сможете сделать то же самое на своем сайте!!!
Установка скрипта на страницу
Шаг 1 - вставьте следующий код в тег <head></head> страницы
Этот код требует наличия файла crawler.js. Скачать файл crawler.js
Шаг 2 - создаем блоки <div></div> с содержимым, которое мы хотим видеть в бегущей строке.
Пример блока с текстовым содержимым:
<div class="marquee" id="mycrawler">
Скрипт бегущей строки - вы сможете сделать то же самое на своем сайте!!!
</div>
Пример блока с изображениями:
<div class="marquee" id="mycrawler2">
<img src="http://img222.imageshack.us/img222/269/laketaupo.jpg" /></p> <img src="http://img705.imageshack.us/img705/5492/800pxaorakimountcookmou.jpg" /> <img src="http://img220.imageshack.us/img220/4317/aucklandcityofsails2.jpg" /> <img src="http://img210.imageshack.us/img210/6531/dneproges.jpg" /> <img src="http://img175.imageshack.us/img175/9610/moscowcity.jpg" /> <img src="http://img210.imageshack.us/img210/3668/auckland.jpg" />
</div>
Шаг 3 - создаем настройки для каждого блока. Выглядят они следующим образом.
Настройки для текстового блока
Настройки для блока с изображениями
Сразу обращаем внимание что параметр uniqueid содержит имя идентификатора того блока DIV, к которому относятся эти настроки!!!
Привожу весь тот код, который должна содержать страница:
В принципе это все что Вам потребуется. Теперь хотелось бы подробнее рассмотреть возможные настройки скрипта.
Настройки скрипта
Отмечаем сразу что все настройки находятся внутри marqueeInit();. Сначала идет имя параметра, затем двоеточие, затем значение параметра, заключенное в одинарные кавычки (для чисел и для значений true, false кавычки не ставятся).
параметр:'значение'
Если таких пар (параметр:значение) несколько, то они отделяются запятыми
параметр:'значение',
параметр2:'значение',
параметр3:'значение'
Запятая не ставится в конце последней пары "параметр:значение"
| Параметр | Описание |
|---|---|
| uniqueid: 'id_блока', | Обязательный параметр! Содержит имя идентификатора блока, к которому относятся настройки |
| style: {
'width': '100%', 'height': '1.6em', 'color': '#fff', 'background-color': '#32f', 'font-family': 'sans-serif', 'margin': '0 auto' }, |
Стили CSS для блока! Обратите внимание на оформление - в конце каждой строки (кроме последней) стоит запятая, а параметр и значение стиля заключены в одинарные кавычки.
Если не указан "width", то ширина блока равна 100%. Если указанная ширина блока намного превышает его содержимое, то блок ужимается, чтобы не иметь пустых зон. |
| inc: 8, |
Скорость/максимальная скорость. Значение, в пикселях, на которое смещается содержимое блока за каждую итерацию. Если параметр mouse имеет значение 'cursor driven', то это максимальная скорость движения блока. В ином случае это постоянная скорость блока. (по умолчанию - 2) |
| addDelay: 20, |
Дополнительная задержка между каждой итерацией смещения. (по умолчания - 30 миллисекунд, а указанное значение прибавляется к значению по умолчанию) |
| mouse: 'cursor driven', |
Поведение при наведении указателя мыши Возможные значения - 'cursor driven', 'pause', false По умолчанию - 'pause' Установите false, если хотите отключить реакцию на наведение указателя |
| direction: 'right', |
Направление движения бегущей строки Возможные значения - 'right' , 'left' По умолчанию - 'left' |
| noAddedSpace: true, |
Включает или выключает автоматическую установку дополнительного промежутка между последним и первым элементом в бегущей строке Возможные значения - true, false По умолчанию - false (промежуток будет добавлен) |
| stopped: true, |
Должна ли бегущая строка загружаться в остановленном режиме? Возможные значения - true, false По умолчанию - false |
| Следующие три параметра используются только при mouse: 'cursor driven' | |
| moveatleast: 4, |
Минимальная скорость (в пикселах) движения бегущей строки, когда указатель мыши находится вне блока. Если не указано, то бегущая строка останавливается, когда указатель мышки покидает блок |
| neutral: 150, |
Размер нейтральной зоны! Ширина зоны (в пикселах) над центром бегущей строки, находясь в которой указатель мыши заставляет ее остановиться По умолчанию - 16 |
| savedirection: true, |
Сохранять ли первоначальное направление движения при покидании указателем блока с бегущей строкой? Возможные значения - true, false, 'reverse' Продолжать движение в первоначальном направлении (true), продолжать движение в текущем направлении (false) или изменить текущее направление на противоположное ('reverse') По умолчанию - false |