Бегущая строка с последними записями. Тег marquee

Сегодня мы создадим бегущую строку с последними записями из определенной категории. Реализовывать это будем с помощью свойства marquee, у него есть множество атрибутов для точного выполнения задания. Атрибуты позволяют изменить скорость движения, направление, ширину, высоту, направление горизонтальное/вертикальное. На самом деле тег marquee позволяет перемещать любые веб-элементы, картинки, текст, блоки и т.д. Так что применять можно во многих случаях.

Список основных атрибутов:

Направление движения.

<marquee direction="down | left | right | up">Текст</marquee>

down — сверху вниз.
left — справа налево.
right – слева направо.
up — вверх.

Скорость движения.

<marquee scrollamount="Целевое число">Текст</marquee>

Число можно присвоить любое, но больше 10 не стоит иначе ерунда получиться, по умолчанию стоит 6.

Количество прокруток.

<marquee loop="число прокруток">Текст</marquee>

Задаем любое число, по умолчанию стоит -1 что значит бесконечно.

И главное мы будем использовать хак чтобы бегущая строка останавливалась при наведении курсора.

onmouseover="this.stop()" onmouseout="this.start()"

Вот так это будет выглядеть.

Бегущая строка с последними новостями

Установка.

Выбираем место где будет пробегать данная строка и вставляем код:

<div id="newpost">
<p>Последние новости</p>
<marquee direction="right" onmouseover="this.stop()" onmouseout="this.start()">
<?php $CountPost = 5; $CategoryID = ''; ?>

<?php $cnt = 0; $my_query = new WP_Query("cat=15".$CategoryID."&showposts=".$CountPost);

while ($my_query->have_posts()) : $my_query->the_post(); ?>

<span class="postter"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></span>

<?php endwhile; ?>
</marquee>
</div>

В 4-й строке указываем количество записей для вывода $CountPost = 5;
В 5-й строке нужно указать идентификатор категории (ID) cat=15 из которой будут выводиться записи.

И последнее добавим стили:

#newpost{
width:400px;
margin-left:20px;
}
span.postter{
padding-left:20px;
}

span.postter a{
color:#cc0000;
}
span.postter a:hover{
text-decoration:underline;
}

Стили отредактируйте под свой вкус, ширину, цвет и т.д.