• Автор:

    Ash Williams
  • Добавлено:

    янв 13, 2017
  • Комментариев:

    0
  • Просмотров:

    553

Хак Новостная лента в форме бегущей стороки

Хак Новостная лента в форме бегущей стороки

Отличная реализация новостной ленты в форме бегущей строки. Данный плагин работает на jQuery и представляет из себя небольшой продолговатый блок, где превью новости или рекламы плавно появляется в этом блоке, как будто его кто то печатает.

Бегущая строка великолепно подойдет новостному сайту. Она экономит место и привлекает внимание посетителей одновременно.

Естественно, что эту бегущую строку можно поставить на любой сайт, так как почти на каждом сайте есть новостная лента или текстовый рекламный блок. Его можно оформить таким образом, как этот великолепный скрипт.

Установить бегущую строку на сайт достаточно просто

Для этого вам нужно:
1. Скачать архив с бегущей строкой, нажав на кнопку "Скачать"
2. Разархивировать в корень вашего сайта, где вы будете размещать вашу бегущую строку
3. Вставить этот код между

<head> и </head>:


чтобы подключить css-стили и файлы js. необходимые для работы бегущей строки:

<link href="styles/style.css?v=2011-04-25" rel="stylesheet" type="text/css" />
<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="includes/jquery.ticker.js" type="text/javascript"></script>
<script src="includes/site.js" type="text/javascript"></script>


4. Вставить сам html код бегущей строки туда, где вы ее хотите видеть:

<ul id="js-news" class="js-hidden">
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
		<li class="news-item">текст, текст, текст, текст, текст, текст</li>
	</ul>


Бегущая строка готова к использованию и наполнению! Удачи в работе!
Внимание! У Вас нет прав для просмотра скрытого текста.
dle
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.