Хаки и Скрипты Next Generation CMS : JS, Эффекты с текстом и ссылками, Меню и навигация : Бегущая строка на Jquery

irbees2008 Опубликовано - 5 - марта JS

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Вот порыскал по просторам интернета и нашел скрипт бегущей строки.Прочитав инструкцию ,я понял он легко интегрируется в в любой шаблон NGCMS.
Приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковываем и заливаем в папку с шаблоном.
2.Подключаем Скрипты в head файла main.tpl

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.li-scroller.1.0.js"></script>
<link rel="stylesheet" href="{tpl_url}/css/li-scroller.css" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
	$("ul#ticker").liScroll();
	//Syntax
});
</script>

3.сам код бегущей строки вставляем туда где хотим видеть

Код:

<ul id="ticker">
<li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
<li><span>01/10/2007</span><a href="#/ogt/content/news/News173.complete">Problematically, however, the Javascript code</a></li>
</ul>

4.хотите использовать несколько блоков то создаете дополнительные списки так

Код:

<ul id="ticker01">
<li></li>
</ul>
<ul id="ticker02">
<li></li>
</ul>
<ul id="ticker03">
<li></li>
</ul>

и соответственно для каждого блока добавляете в скрипте инициализацию

Код:

<script type="text/javascript">
$(function(){
	$("ul#ticker01").liScroll();
	$("ul#ticker02").liScroll();
        $("ul#ticker03").liScroll();
//Syntax
});
</script>

5.Также можно задать скорость движения строки

Код:

<script type="text/javascript">
$(function(){
		$("ul#ticker").liScroll({travelocity: 0.15});
//Syntax

});
</script>

код

Код:

{travelocity: 0.15}

можете изменять до 1
6.Ну вроде все,а нет вру,можно подключить плагин xnews,кому надо будет могу выложить.

Можешь почитать и вот эту статейку "Переливающийся текст"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.