Ваша корзина пуста
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Acmeticker - Полнофункциональная лента новостей с элементами управления

Дата добавления: 29.01.2021 - 11:22
Добавил: Buger
Количество просмотров: 165
Количество комментариев: 0
Размер файла: 43.0 Kb
Рейтинг материала: 5.0 / 1
Acmeticker - Полнофункциональная лента новостей с элементами управления
БЕСПЛАТНО
рейтинг 5.0
/
голосов 1
Acmeticker - это простой в использовании плагин jQuery для создания горизонтальных или вертикальных тикеров новостей с элементами управления «следующий / предыдущий / воспроизведение / пауза».

Демонстрация в папке /examples/

Больше возможностей:
  • 4 типа: горизонтальный, вертикальный, маркер и пишущая машинка.
  • Автовоспроизведение и пауза при наведении и/или фокусе.
  • Настраиваемая скорость анимации.
  • Поддерживает направления вверх / вниз /влево / вправо.


Как использовать:


1. Загрузите и подключите скомпилированную таблицу стилей в заголовок документа.
Код
<link rel="stylesheet" href="/path/to/assets/css/style.css" />

2. Добавьте свой контент вместе с меткой и элементами управления в контейнер ленты новостей.
Код
<div class="acme-news-ticker">
  <div class="acme-news-ticker-label">News Ticker Label</div>
  <div class="acme-news-ticker-box">
  <ul class="my-news-ticker">
  <li>
  <a href="#">Breaking News 1</a>
  </li>
  <li>
  <a href="#">Breaking News 2</a>
  </li>
  <li>
  <a href="#">Breaking News 3</a>
  </li>
  </ul>
  </div>
  <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
  <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
  <span class="acme-news-ticker-pause"></span>
  <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
  </div>
</div>

3. Загрузите и подключите основной JavaScript-файл acmeticker.js после библиотеки jQuery.
Код
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/assets/js/acmeticker.js"></script>

4. Инициализируйте ленту новостей и включите элементы управления.
Код
$('.my-news-ticker').AcmeTicker({
  controls: {
  prev: $('.acme-news-ticker-prev'),
  toggle: $('.acme-news-ticker-pause'),
  next: $('.acme-news-ticker-next')
  }
});

5. Определите, какой тип ленты новостей вы предпочитаете:
horizontal: горизонтальный план. Одновременно отображается только одна запись.
vertical: Вертикальное расположение. Одновременно отображается только одна запись.
marquee: Прокручивает записи так же, как тег <marquee />.
typewriter: Вывод записей с эффектом набора текста.
Код
$('.my-news-ticker').AcmeTicker({
  type: 'horizontal'
});

6. Определите интервал автовоспроизведения. По умолчанию: 2000 (мс).
Код
$('.my-news-ticker').AcmeTicker({
  autoplay: 2000
});

7. Определите скорость анимации. По умолчанию: 50 (мс).
Код
$('.my-news-ticker').AcmeTicker({
  speed: 50
});

8. Определите направление тикера новостей. По умолчанию: up / down / left / right.
Код
$('.my-news-ticker').AcmeTicker({
  direction: 'up'
});

9. Определите, следует ли приостановить ленту новостей в фокусе или при наведении курсора. По умолчанию: true.
Код
$('.my-news-ticker').AcmeTicker({
  pauseOnFocus: true,
  pauseOnHover: true
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: