Если у вас бурно развивающийся блог или информационный сайт, и новые посты появляются довольно часто, то пользователю необходимо как-то сообщать о наиболее важных и «горячих» новостях. Использовать модные ныне слайдеры не совсем для этого удобно, поэтому сегодня мы поговорим о том, как сделать бегущую строку на сайте. Для этого мы используем очень простой плагин на jQuery.
Подключаем наш скрипт, библиотеку jQuery и стили к нему, сразу оговорюсь, бегущая строка – это не только слова и фразы, выкидывать в нее можно все, что угодно, поэтому не бойтесь экспериментировать. CSS файл во вложении – всего лишь простейший пример.
<link href="li-scroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.li-scroller.js" type="text/javascript"></script>
Далее создаем обычный список:
<ul id="ticker-1">
<li>
<span>10/10/2007</span>
<a href="#">
The first thing ...
</a>
</li>
<li>
<span>10/10/2007</span>
<a href="#">
End up doing is ...
</a>
</li>
<li>
<span>10/10/2007</span>
<a href="#">
The code that you ...
</a>
</li>
</ul>
Прокручиваться у нас будут элементы li, которые находятся внутри списка ul с id=ticker-1, поэтому, как я уже и говорил, внутрь li кладем все, что хотим. В нашем случае, просто строка с датой и сама новость, оформленная ссылкой.
Вызываем нашу функцию:
$("ul#ticker-1").liScroll({
travelocity: 0.15
});
Как видим, плагин имеет всего лишь один необязательный параметр travelocity, который отвечает за скорость элементов в бегущей строке. Можно его не указывать, тогда скорость установится заданной по умолчанию – 0.07:
Вот такой вот простой плагин для реализации бегущей строки. В заключении хотел бы посоветовать: используйте бегущую строку только там, где она действительно нужна. Если у вас на сайте нет валового потока новостей, по 10-15 событий в день, то данный плагин вам попросту не нужен.