Новостная лента на jQuery (jQuery News Ticker) для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Новостная лента на jQuery (jQuery News Ticker) для uCoz

JQuery News Ticker (Новостная лента на jQuery ) легкий и простой в использовании плагин бегущая строка с использованием библиотеки JQuery.
  • Плагин jQuery News Ticker поддерживает языки с порядком чтения справа-налево!
  • Плагин jQuery News Ticker поддерживает загрузку содержания через фид RSS!
  • Плагин jQuery News Ticker имеет опцию включения эффекта затухания для смены новостей!
  • Плагин jQuery News Ticker совместим с jQuery 1.3.2!


подключите файлы из архива в head:
ВНИМАНИЕ !!! Если у Вас подключена библиотека JQERY то первую строчку (jquery-1.7.2.js) НЕ ПИШЕМ.
Код
<script type="text/javascript" src="http://s11.ucoz.net/src/jquery-1.7.2.js"></script>            
<link href="http://megascripts.ru/demo/News_Ticker/css/ticker-style.css" rel="stylesheet" type="text/css" />            
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/site.js"></script>            
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/jquery.ticker.js"></script>

разметка HTML для формирования бегущей строки (в то место где будет скрипт):
Код
<ul id="js-news" class="js-hidden">            
<li class="news-item">Новость №1 - Здесь будет описание новости №1 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №2 - Здесь будет описание новости №2 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №3 - Здесь будет описание новости №3 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №4 - Здесь будет описание новости №4 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №5 - Здесь будет описание новости №5 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №6 - Здесь будет описание новости №6 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
<li class="news-item">Новость №7 - Здесь будет описание новости №7 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>            
</ul>

Опции
Вы можете поменять внешний вид бегущей строки с помощью редактирования JS кода (в файле jquery.ticker.js).
Ниже приводится список доступных опций плагина с указанием значений по умолчанию:
Код
speed: 0.10, // Скорость вывода строки текста            
ajaxFeed: false, // Наполнение News Ticker через фид RSS            
feedUrl: false, // Адрес URL фида // ДОЛЖЕН РАСПОЛАГАТЬСЯ В ТОМ ЖЕ ДОМЕНЕ, ЧТО И БЕГУЩАЯ СТРОКА            
feedType: 'xml', // Пока только XML            
htmlFeed: true, // Наполненние News Ticker через HTML            
debugMode: true, // Вывод некоторой информации в консоль или в виде сообщений            
// ДЛЯ ОПУБЛИКОВАННОГО ПРОЕКТА ДОЛЖНО ИМЕТЬ ЗНАЧЕНИЕ FALSE!            
controls: true, // Выводить или нет кнопки управления            
titleText: 'Новости', // Текст рядом с новостями            
displayType: 'reveal', // Тип анимации. Доступные опции 'reveal' или 'fade'            
direction: 'ltr' // Направление вывода строки.             
Доступные опции 'ltr'(слева-направо) или 'rtl'(справа-налево)            
pauseOnItems: 2000, // Длительность паузы перед сменой новости            
fadeInSpeed: 600, // Скорость проявления анимации fade            
fadeOutSpeed: 300 // Скорость исчезания анимации fade

Как загружать содержание из фида RSS ?

Изменим пару строк в JS коде (в файле jquery.ticker.js).
Заменим :
Код
ajaxFeed: false,            
feedUrl: false,

на
Код
ajaxFeed: true,            
feedUrl: 'http://webmaster-ucoz.ru/load/rss/',

разметка HTML для формирования бегущей строки (в то место где будет скрипт):
Код
<ul id="js-news" class="js-hidden">            
<li class="news-item"></li>            
</ul>

Фид RSS должен располагаться в том же домене, что и плагин, так как jQuery не разрешает кросс-доменные запросы.

Вот и всё. И как обычно - всё необходимое находиться в архиве.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.09.2014 в 12:30
Материал просмотрен: 940 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта