Новостная лента бегущая строка с кнопкой пауза и прокруткой новостей    
Радио Business FM прямой эфир.
Главная » 2016 » Ноябрь » 6 » Новостная лента бегущая строка с кнопкой пауза и прокруткой новостей » [457]
13:41
Новостная лента бегущая строка с кнопкой пауза и прокруткой новостей

Новостная лента бегущая строка с кнопкой пауза и прокруткой новостей

Прекрасная реализация новостной ленты в форме бегущей строки. Работает на 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="http://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>

Готово! Бегущая строка готова к использованию и наполнению!

СКАЧАТЬ

Архив 11.91 kb

 

Свои фото, видеоматериалы, новости присылайте на электронный адрес: yarickiy@miru-news.ru

 

 

Источник

счетчик посещений

Категория: Веб-Мастер | Просмотров: 457 | :: : | Теги: HTML код, бегущая строка, веб-мастер
Всего комментариев: 0
avatar