196 lines
12 KiB
HTML
196 lines
12 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<title>liMarquee</title>
|
||
<link rel="stylesheet" href="../css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="conteiner">
|
||
<h3>liMarquee - jQuery Marquee или бегущая строка на jQuery</h3>
|
||
<div class="navPr">
|
||
<span>Демо</span>
|
||
</div>
|
||
|
||
<fieldset>
|
||
<legend>Описание</legend>
|
||
liMarquee - jQuery Marquee или бегущая строка на jQuery<br><br>
|
||
Плагин liMarquee является аналогом тега «marquee» и также как и он не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. <br><br>
|
||
Но в отличии от тега «marquee», liMarquee имеет ряд преимуществ таких как:<br><br>
|
||
|
||
1. Перемещение можно задать не только по горизонтали, но и вертикали.<br>
|
||
2. Бегущая строка liMarquee останавливается при наведении курсора мыши.<br>
|
||
3. После остановки бегущую строку можно двигать мышью и перемещать на удобную для чтения или просмотра позицию<br>
|
||
4. Возможна подгрузка текста из XML файла. <br>
|
||
5. Возможно динамическое изменение скорости и мн.др.
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>Демо</legend>
|
||
<p><a href="default.html">Параметры по умолчанию</a></p>
|
||
<p><a href="from_left_to_right.html">Движение слева на право</a></p>
|
||
<p><a href="drag_line_off.html">Отключена возможность draggable (перетаскивания)</a></p>
|
||
<p><a href="hover_stop_off.html">Отключена остановка строки при наведении мыши</a></p>
|
||
<p><a href="image.html">Бегущие изображения</a></p>
|
||
<p><a href="move_html.html">Бегущая строка с html кодом</a></p>
|
||
<p><a href="../vertical.html">Движение по вертикали</a></p>
|
||
<p><a href="../xml.html">XML</a></p>
|
||
<p><a href="../update.html">Использование метода "update"</a></p>
|
||
<p><a href="destroy.html">Использование метода "destroy"</a></p>
|
||
<p><a href="change_speed.html">Изменение скорости движения</a></p>
|
||
<p><a href="pause_and_play.html">Методы "pause" и "play"</a></p>
|
||
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>Параметры</legend>
|
||
|
||
|
||
<table class="optionsTable" width="100%" border="0" cellspacing="0" cellpadding="0">
|
||
<tr>
|
||
<th width="1%">Option</th>
|
||
<th width="1%">Default value</th>
|
||
<th>Datatype</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
<tr>
|
||
<td>direction</td>
|
||
<td>"left"</td>
|
||
<td>String</td>
|
||
<td>Указывает направление движения бегущей строки. <br>Может принимать значения: <span class="value">"left"</span>, <span class="value">"right"</span>, <span class="value">"up"</span>, <span class="value">"down"</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>loop</td>
|
||
<td>-1</td>
|
||
<td>Number</td>
|
||
<td>Задает, сколько раз будет прокручиваться содержимое. <br>Может принимать значения: <span class="value">любое целое положительное число</span> или <span class="value">-1</span> - для бесконечного повторения </td>
|
||
</tr>
|
||
<tr>
|
||
<td>scrolldelay</td>
|
||
<td>0</td>
|
||
<td>Number</td>
|
||
<td>Величина задержки перед каждым повторением. <br>Может принимать значения: <span class="value">любое целое положительное число</span> в миллисекундах</td>
|
||
</tr>
|
||
<tr>
|
||
<td>scrollamount</td>
|
||
<td>50</td>
|
||
<td>Number</td>
|
||
<td>Скорость движения строки. <br>Может принимать значения: <span class="value">любое целое положительное число</span> px/sec</td>
|
||
</tr>
|
||
<tr>
|
||
<td>circular</td>
|
||
<td>true</td>
|
||
<td>Boolean</td>
|
||
<td>Создает эффект бесконечной строки. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>drag</td>
|
||
<td>true</td>
|
||
<td>Boolean</td>
|
||
<td>Включает перетаскивание строки мышкой. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>runshort</td>
|
||
<td>true</td>
|
||
<td>Boolean</td>
|
||
<td>Включает движение "короткой" строки, когда размер контента меньше размера бегущей строки. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>hoverstop</td>
|
||
<td>true</td>
|
||
<td>Boolean</td>
|
||
<td>Включает остановку строки при наведения курсора мыши. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>xml</td>
|
||
<td>false</td>
|
||
<td>Boolean, String</td>
|
||
<td>Подключает внешний XML файл с контентом, и загружает этот контент в бегущую строку. <br>Может принимать значения: <span class="value">путь к XML файлу</span> или <span class="value">false</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>inverthover</td>
|
||
<td>false</td>
|
||
<td>Boolean</td>
|
||
<td>Инвертирует стандартную реакцию на наведение курсора. <br>Может принимать значения: <span class="value">true</span>, <span class="value">false</span></td>
|
||
</tr>
|
||
</table>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>Методы</legend>
|
||
<h2 class="value">update()</h2>
|
||
<p>Обновляет инициализацию строки (например: после изменения внутреннего содержания)</p>
|
||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||
|
||
<h2>Пример кода</h2>
|
||
|
||
$('.str').liMarquee('update');
|
||
|
||
|
||
<h2 class="value">destroy()</h2>
|
||
<p>Удаляет весь функционал бегущей строки. Возвращает элемент в состояние до инициализации плагина</p>
|
||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||
|
||
<h2>Пример кода</h2>
|
||
|
||
$('.str').liMarquee('destroy');
|
||
|
||
|
||
<h2 class="value">pause()</h2>
|
||
<p>Останавливает движение строки</p>
|
||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||
|
||
<h2>Пример кода</h2>
|
||
|
||
$('.str').liMarquee('pause');
|
||
|
||
|
||
<h2 class="value">play()</h2>
|
||
<p>Запускает движение строки</p>
|
||
<p><i>(Этот метод не принимает аргументов)</i></p>
|
||
|
||
<h2>Пример кода</h2>
|
||
|
||
$('.str').liMarquee('play');
|
||
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>LOG</legend>
|
||
20.11.2014 - Добавлены методы "pause" и "play" для паузы/пуска движения строки<br>
|
||
30.10.2014 - Добавлена возможность динамически изменить скорость движения строки (см демо: "Изменение скорости движения")<br>
|
||
27.04.2014 - Добавлен метод "destroy", который удаляет весь функционал бегущей строки и возвращает элемент в состояние до инициализации плагина<br>
|
||
30.03.2014 - Добавлено зацикливание короткой строки при перетаскивании<br>
|
||
30.03.2014 - Устранен баг позиционирования длинной строки при перетаскивании<br>
|
||
23.03.2014 - Добавлена блокировка случайного события "click" <br>
|
||
09.02.2014 - Добавлен параметр "inverthover", который инвертирует стандартную реакцию на наведение курсора. <br>
|
||
09.02.2014 - Иправлен баг при перетаскивании зацикленной строки<br>
|
||
21.01.2014 - Исправлена ошибка расчета скорости при использовании метода "update"<br>
|
||
04.12.2013 - Добавлен метод "update", который обновляет инициализацию строки после изменения внутреннего содержания<br>
|
||
02.12.2013 - Добавлена возможность подгружать многострочный XML файл<br>
|
||
22.11.2013 - Добавлен параметр "hoverstop". При значении "true" - строка останавливается при наведении курсора мыши (значение по умолчанию), "false" - строка не останавливается<br>
|
||
22.11.2013 - Движение короткой строки справа налево и сверху вниз теперь начинается корректно (движение начинается с противоположного конца строки)<br>
|
||
12.10.2013 - Добавлена возможность движения динамически меняющейся строки<br>
|
||
07.09.2013 - Добавлена возможность перетаскивать строку с изображениями<br>
|
||
07.09.2013 - Устранен баг при перетаскивании строки (когда курсор при зажатой LM выходил за пределы строки)<br>
|
||
06.09.2013 - Добавлен пример с HTML блоками<br>
|
||
30.07.2013 - Добавлено движение по горизонтали направо direction: 'right'<br>
|
||
24.05.2013 - Добавлено движение по вертикали вниз direction: 'down'<br>
|
||
17.05.2013 - Добавлена возможность подгрузки текста из xml файла<br>
|
||
20.02.2013 - Устранен баг в непрерывной строке, который приводил к неожиданному ускорению бегущей строки<br>
|
||
26.01.2013 - Добавлена управляемая возможность движения короткой строки (параметр: "runshort", значения: "true" или "false")<br>
|
||
22.01.2013 - Фикс под медленный интернет. В HTML рекомендовано элементу сразу дописывать класс "str_wrap". Сам файл liMarquee.css для этого был немного изменен<br>
|
||
22.01.2013 - Фикс под IE9. С версией jQuery 1.8 не работала функция $(window).load() - Этот баг устранен в версии 1.9.0, поэтому скрипт подключаем вместе с jquery версии 1.9.0
|
||
|
||
</fieldset>
|
||
|
||
|
||
</div>
|
||
<div class="autor">
|
||
<a class="logoMasscode" target="_blank" href="http://masscode.ru">
|
||
<span class="logoMass">MASS</span>CODE<span class="logoMass">.RU</span>
|
||
</a>
|
||
</div>
|
||
</body>
|
||
</html> |