Как сделать бегущую строку в 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