» »

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


Отличное решение для интернет ресурса по тематике новости. Так как новостная строка, будет появляться печатными буквами и отлично читабельной для пользователя. Также ее можно применить в плане рекламы, по размещению ее в строке. Сама она построена на jQuery, что лента также будет отражаться на всех браузерах. Но здесь также нужно понимать присутствуют анимация, которая своей стилистикой будет больше привлекать.

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

Код
<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>


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

Код
<ul id="js-news" class="js-hidden">  
<li class="news-item">jQuery News Ticker now has support for multiple tickers per page!</li>  
<li class="news-item">jQuery News Ticker now has support for right-to-left languages!</li>  
<li class="news-item">jQuery News Ticker now has support for loading content via an RSS feed!</li>  
<li class="news-item">jQuery News Ticker now has an optional fade effect between items!</li>  
<li class="news-item">New updates have been made to jQuery News Ticker! Check below for more details!</li>  
<li class="news-item">jQuery News Ticker is now compatible with jQuery 1.3.2! See below for further details and for latest download.</li>  
<li class="news-item">Further updates to jQuery News Ticker are coming soon!</li>  
</ul>
10.05.2016 Загрузок: 3 Просмотров: 494 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Tergran
Tergran 10.05.2016 17:581
0
Но будет полоса бегущая, но есть намного легче скрипт, что работает в этом формате.
feliksteg
feliksteg 10.05.2016 18:072
0
В сети этот скрипт много где встречал, но вот на самом сайте чтоб он был установлен не разу. Здесь вы бы хоть демон вывели если это возможно. Так как думаю будет понятнее намного, где его можно применить.
Kosten
Kosten 10.05.2016 19:193
0
Но демонстрация безусловно покажет, а вот можно ее сделать, тут не знаю, на меню и другие скрипты делал, на этот просто не знаю.
FeStemBer
FeStemBer 10.05.2016 19:504
0
Этот скрипт мне не понятен, и не стал бы сам грузить этим кодом, простую таблицу или модальное окно поставил и намного лучше и обзор больше.
Kosten
Kosten 14.05.2016 04:475
0
Точно не скажу, но что то похоже на этот скрипт, который прогоняет текст.

avatar