Реклама
timeweb
falbar

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

21 января 2015 2443 0

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

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