Создаем бегущую строку новостей на jQuery - Web мастер, PHP, AJAX, MySQL

[Everybody]

По скольку стандартный тег marque (html) это переЖитки старого, то создадим современну бегущую строку на библиотеке jQuery. Разумеется, бегущие заголовки новостей одновременно являются ссылками, а для того, что бы приостановить поток данных, требуется, только навести на строку курсор. Теперь установим, для начало создадим файл jquery.li-scroller.1.0.js содержимое которого:

Код Выделить Развернуть

jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 0;
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width();    //a.k.a. 'mask' width
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).width();
});
$strip.width(stripWidth);
var defTiming = stripWidth/settings.travelocity;
var totalTravel = stripWidth+containerWidth;
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};... и вложите в корень сайта, впишите <script type="text/javascript" src="jquery.li-scroller.1.0.js"></script> перед тегом </head>

После как библиотеки подключили, нужно вставить саму строку которая будет "бежать"

Код Выделить Развернуть

<ul id="ticker01">
<li><span>10/10/2009</span><a href="#">Если вы видите ...</a></li>
<li><span>10/10/2009</span><a href="#">как движется эта строка ...</a></li>
<li><span>10/10/2009</span><a href="#">значит у вас получилось, спасибо x-mu.net ...</a></li>
<!-- eccetera -->
</ul>Регулировка скорости через параметр travelocity параметр перед тегом </head>

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

Должно получиться следующее: Demo link

Внимание: чтобы работала бегущая строка, вам помимо этого мода нужно подключить библиотеку jQuery (мини движок) , перед тегом </head> подключим движок <script type="text/javascript" src="https://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/js/jquery-1.3.2.min.js"></script> можно и сохранить себе на сайт или подключать со сторонего источника.