liMarquee

liMarquee - jQuery Marquee или бегущая строка на jQuery

Демо

Описание liMarquee - jQuery Marquee или бегущая строка на jQuery

Плагин liMarquee является аналогом тега «marquee» и также как и он не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.

Но в отличии от тега «marquee», liMarquee имеет ряд преимуществ таких как:

1. Перемещение можно задать не только по горизонтали, но и вертикали.
2. Бегущая строка liMarquee останавливается при наведении курсора мыши.
3. После остановки бегущую строку можно двигать мышью и перемещать на удобную для чтения или просмотра позицию
4. Возможна подгрузка текста из XML файла.
5. Возможно динамическое изменение скорости и мн.др.

Демо

Параметры по умолчанию

Движение слева на право

Отключена возможность draggable (перетаскивания)

Отключена остановка строки при наведении мыши

Бегущие изображения

Бегущая строка с html кодом

Движение по вертикали

XML

Использование метода "update"

Использование метода "destroy"

Изменение скорости движения

Методы "pause" и "play"

Параметры

Option	Default value	Datatype	Description
direction	"left"	String	Указывает направление движения бегущей строки. Может принимать значения: "left", "right", "up", "down"
loop	-1	Number	Задает, сколько раз будет прокручиваться содержимое. Может принимать значения: любое целое положительное число или -1 - для бесконечного повторения
scrolldelay	0	Number	Величина задержки перед каждым повторением. Может принимать значения: любое целое положительное число в миллисекундах
scrollamount	50	Number	Скорость движения строки. Может принимать значения: любое целое положительное число px/sec
circular	true	Boolean	Создает эффект бесконечной строки. Может принимать значения: true, false
drag	true	Boolean	Включает перетаскивание строки мышкой. Может принимать значения: true, false
runshort	true	Boolean	Включает движение "короткой" строки, когда размер контента меньше размера бегущей строки. Может принимать значения: true, false
hoverstop	true	Boolean	Включает остановку строки при наведения курсора мыши. Может принимать значения: true, false
xml	false	Boolean, String	Подключает внешний XML файл с контентом, и загружает этот контент в бегущую строку. Может принимать значения: путь к XML файлу или false
inverthover	false	Boolean	Инвертирует стандартную реакцию на наведение курсора. Может принимать значения: true, false

Методы

update()

Обновляет инициализацию строки (например: после изменения внутреннего содержания)

(Этот метод не принимает аргументов)

Пример кода

$('.str').liMarquee('update');

destroy()

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

(Этот метод не принимает аргументов)

Пример кода

$('.str').liMarquee('destroy');

pause()

Останавливает движение строки

(Этот метод не принимает аргументов)

Пример кода

$('.str').liMarquee('pause');

play()

Запускает движение строки

(Этот метод не принимает аргументов)

Пример кода

$('.str').liMarquee('play');

LOG 20.11.2014 - Добавлены методы "pause" и "play" для паузы/пуска движения строки
30.10.2014 - Добавлена возможность динамически изменить скорость движения строки (см демо: "Изменение скорости движения")
27.04.2014 - Добавлен метод "destroy", который удаляет весь функционал бегущей строки и возвращает элемент в состояние до инициализации плагина
30.03.2014 - Добавлено зацикливание короткой строки при перетаскивании
30.03.2014 - Устранен баг позиционирования длинной строки при перетаскивании
23.03.2014 - Добавлена блокировка случайного события "click"
09.02.2014 - Добавлен параметр "inverthover", который инвертирует стандартную реакцию на наведение курсора.
09.02.2014 - Иправлен баг при перетаскивании зацикленной строки
21.01.2014 - Исправлена ошибка расчета скорости при использовании метода "update"
04.12.2013 - Добавлен метод "update", который обновляет инициализацию строки после изменения внутреннего содержания
02.12.2013 - Добавлена возможность подгружать многострочный XML файл
22.11.2013 - Добавлен параметр "hoverstop". При значении "true" - строка останавливается при наведении курсора мыши (значение по умолчанию), "false" - строка не останавливается
22.11.2013 - Движение короткой строки справа налево и сверху вниз теперь начинается корректно (движение начинается с противоположного конца строки)
12.10.2013 - Добавлена возможность движения динамически меняющейся строки
07.09.2013 - Добавлена возможность перетаскивать строку с изображениями
07.09.2013 - Устранен баг при перетаскивании строки (когда курсор при зажатой LM выходил за пределы строки)
06.09.2013 - Добавлен пример с HTML блоками
30.07.2013 - Добавлено движение по горизонтали направо direction: 'right'
24.05.2013 - Добавлено движение по вертикали вниз direction: 'down'
17.05.2013 - Добавлена возможность подгрузки текста из xml файла
20.02.2013 - Устранен баг в непрерывной строке, который приводил к неожиданному ускорению бегущей строки
26.01.2013 - Добавлена управляемая возможность движения короткой строки (параметр: "runshort", значения: "true" или "false")
22.01.2013 - Фикс под медленный интернет. В HTML рекомендовано элементу сразу дописывать класс "str_wrap". Сам файл liMarquee.css для этого был немного изменен
22.01.2013 - Фикс под IE9. С версией jQuery 1.8 не работала функция $(window).load() - Этот баг устранен в версии 1.9.0, поэтому скрипт подключаем вместе с jquery версии 1.9.0