Как сделать бегущую строку в html? Очень просто. Делается это с помощью тега html < marquee > Этот тег имеет ряд атрибутов. Мы рассмотрим их на примерах ниже и узнаем как вывести последние новости из определенных категорий бегущей строкой в wordpress.
Тег <marquee> дает возможность перемещать не только текст, но и другие элементы, например картинки или блоки.
Пример как сделать бегущую строку в html слева направо:
<marquee direction= "right">Бегущая строка в html cлева направо</marquee>
Что бы текст не уходил за кромку поля, а двигался туда и обратно добавляем атрибут behavior со значением alternate
<marquee behavior= "alternate" >Бегущая строка перемещается между правым и левым полем</marquee>
Останавливаем бегущую строку наведением курсора
<marquee onmouseout= "this.start()" onmouseover="this.stop()" ><b>Бегущая строка останавливается при наведении</b></marquee>
Делаем нашу строку цветной и более привлекательной путем добавления стилей css:
<marquee style= "color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000 0px 1px 1px;" >Цветная бегущая строка с тенью </marquee>
Как сделать бегущую строку html на цветном фоне:
<marquee bgcolor= "#e20b0b" >Бегущая строка на цветном фоне</marquee>
Бегущая строка в html движется снизу вверх. Высоту блока указываем атрибутом heigh:
<marquee direction= "up" height= "120" style= "color:#0F8D68; font-size: 24px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" >Бегущая строка снизу вверх</marquee>
height= «120»- высота блока
color:#0F8D68- цвет текста
font-size: 24px- размер шрифта
Атрибутом scrolldelay регулируем скорость прокрутки:
<marquee scrolldelay= "50" style= "color:#0F9D58; font-size: 24px; font-weight: bolder; line-height: 110%; text-shadow: #000000 0px 1px 1px;" >Как сделать бегущую строку в html</marquee>
Оформляем блок в рамку, добавим высоту, ширину, атрибуты width и height и цвет фона атрибут bgcolor
<marquee bgcolor= "#e2000b" direction= "down" height= "130" width= "300" scrollamount= "3" style= "border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" >Бегущая строка в рамке на цветном фоне</marquee>
Бегущая строка в html с изображением
<marquee><img src= "URL изображения" /></marquee>
Вставляем ссылку в бегущую строку
<marquee onmouseout= "this.start()" onmouseover= "this.stop()" > Текст перед ссылкой <a href= "url адрес ссылки" >текст ссылки</a></marquee>
И в конце о том, как с помощью бегущей строки вывести новые записи из определенных категорий WordPress без плагина.
Для этого копируем код ниже.
<div id="newpost">
<h2>Пример бегущей строки</h2>
</br>
<hr>
<marquee direction = "left" onmouseover = "this.stop()" onmouseout = "this.start()" >
<?php $CountPost = 5; $CategoryID = '1,18'; ?>
<?php $cnt = 0; $my_query = new WP_Query("cat= ".$CategoryID." &showposts= ".$CountPost);
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<span class = "runpost" ><a href = "<?php the_permalink() ?>" ><?php the_title(); ?></a> * * * </span>
<?php endwhile; ?>
</marquee>
<hr>
</div>
$CountPost = 5 — количество выводимых записей (поставьте сколько нужно)
$CategoryID = ‘1,18’ — id категорий из каких выводим последние записи (ставим через запятую)
Далее вставляем код в необходимое место страницы через редактор файлов. В боковой панели: Внешний вид > Редактор > Файл. Что бы бегущая строка была в хедере сайта прописываем код в header.php, для вывода строки в подвале — файл footer.php
Работу кода можно посмотреть здесь: Демо вывода последних новостей бегущей строкой
Примерно так. Надеюсь что статья будет для Вас полезной. Успехов!
Всего комментариев: 0