Показать Меню
falbar Бегущая строка

Разбираемся, как сделать бегущую строку на сайте

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

Если у Вас бурно развивающийся блог или информационный сайт, и новые посты появляются довольно часто, то пользователю необходимо как-то сообщать о наиболее важных и «горячих» новостях. Использовать модные ныне слайдеры не совсем для этого удобно, поэтому сегодня мы поговорим о том, как сделать бегущую строку на сайте. Для этого мы используем очень простой плагин на 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 кладем все, что хотим. В нашем случае, просто строка с датой и сама новость, оформленная ссылкой.

Вызываем нашу функцию:

$(function(){
	$("ul#ticker-1").liScroll({travelocity: 0.15});
});

Как видим, плагин имеет всего лишь один необязательный параметр travelocity, который отвечает за скорость элементов в бегущей строке. Можно его не указывать, тогда скорость установится заданной по умолчанию – 0.07:

$(function(){
	$("ul#ticker-1").liScroll();
});

Вот такой вот простой плагин для реализации бегущей строки. В заключении хотел бы посоветовать: используйте бегущую строку только там, где она действительно нужна. Если у Вас на сайте нет валового потока новостей, по 10-15 событий в день, то данный плагин Вам попросту не нужен.

На этом всё, до новых встреч!

Источник
gcmingati.net

Подписаться на обновления

Комментариев еще не оставлено