Как сделать бегущую строку на сайте с помощью тега marquee.

ТЕГ MARQUEE

Для того чтобы вставить бегущую строку на сайт нет необходимости в использовании плагина. В этой статье мы рассмотрим, как сделать бегущую строку на сайте с помощью тега marquee.

Атрибуты тега бегущей стоки marquee.

Создадим вот такую конструкцию <marquee>Текст бегущей строки</marquee> и посмотрим, что получилось:

Текст бегущей строки

Как видим, наша только что созданная бегущая строка сразу же заработала. Теперь отрегулируем скорость бегущей строки. Скорость устанавливается с помощью атрибута scrollamount. Атрибут scrolldelay устанавливает задержку между шагами бегущей строки в миллисекундах. Используем оба атрибута <marquee scrollamount="10" scrolldelay="100">Текст бегущей строки</marquee> и посмотрим на результат:

Текст бегущей строки

Создадим фон бегущей строки. Цвет фона устанавливает атрибут bgcolor. Напишем код для бегущей строки с серым фоном <marquee scrollamount="10" scrolldelay="100" bgcolor="#F6F6F6">Текст бегущей строки</marquee> и посмотрим результат:

Текст бегущей строки

С помощью атрибута direction устанавливается направление движения бегущей строки. По умолчанию direction="left" (движение справа налево). Установим движение слева направо direction="right". Пишем код <marquee scrollamount="10" scrolldelay="100" bgcolor="#F6F6F6" direction="right">Текст бегущей строки</marquee> и смотрим результат:

Текст бегущей строки

Зададим для нашей строки движение снизу вверх direction="up". Для вертикального движения обязательно необходимо задавать высоту блока бегущей строки. Ширина и высота задается атрибутами width и height. Напишем код для движения снизу вверх с высотой блока 50 px. <marquee scrollamount="3" bgcolor="#F6F6F6" height="50" direction="up"">Текст бегущей строки</marquee> и посмотрим результат:

Текст бегущей строки

Для движения сверху вниз direction="down" напишем аналогичный код <marquee scrollamount="3" bgcolor="#F6F6F6" height="50" direction="down">Текст бегущей строки</marquee>

Текст бегущей строки

Атрибут loop определяет количество циклов перемещения. По умолчанию loop="-1", что означает бесконечное перемещение текста бегущей строки. Атрибут behavior отвечает за поведение бегущей строки. Если behavior="slide", текст бегущей строки совершит количество циклов, заданное атрибутом loop и остановится у края видимой области. Для примера, напишем код для пяти повторений с последующим остановом <marquee scrollamount="10" bgcolor="#F6F6F6" direction="left" loop="5" behavior="slide">Текст бегущей строки</marquee>

Текст бегущей строки

Если behavior="alternate", бегущая строка будет совершать возвратно-поступательные движения <marquee scrollamount="10" bgcolor="#F6F6F6" direction="left" behavior="alternate">Текст бегущей строки</marquee>

Текст бегущей строки

Если мы хотим, чтобы бегущая строка останавливалась при наведении на нее курсора, необходимо в тег marquee добавить onmouseover="this.stop();" onmouseout="this.start();". Пример кода: <marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10" bgcolor="#F6F6F6" direction="left">Текст бегущей строки</marquee> и результат:

Текст бегущей строки

Ссылку в бегущую строку можно вставить с помощью конструкции <marquee><a href="адрес ссылки" target="_blank">Текст бегущей строки</a></marquee>

Транслит переводчик онлайн

С помощью тега marquee и картинки в формате gif можно сделать простую анимацию <marquee><img src="адрес картинки" /></marquee>

Картинки и текст в бегущей строке можно располагать в любой последовательности <marquee>Текст<img src="адрес картинки" />Текст</marquee>

Что делаем?Летим за скидками

С содержимым между открывающим <marquee> и закрывающим </marquee> тегами можно производить те же действия, как и без них. Для примера, если мне нужен текст бегущей строки малинового цвета размером 18 px со шрифтом Verdana, я могу воспользоваться тегом span: <marquee scrollamount="10" bgcolor="#F6F6F6"><span style="color: #ff00c8; font-family: Verdana; font-size: 18px;">Текст бегущей строки</span></marquee>

Текст бегущей строки

Особенности работы с тегом marquee в WordPress.

Мы познакомились с основными атрибутами тега marquee. Теперь поговорим о том, где и как можно располагать этот тег на сайте или блоге созданном на WordPress.

Бегущая строка, сделанная с помощью тега marquee, без проблем вставляется в виджеты и любой файл php. Если же нам надо вставить бегущую строку с тегом marquee непосредственно в статью или в запись, надо учитывать тот факт, что визуальный редактор WordPress не воспринимает этот тег. Со статьей или записью, содержащую бегущие строки, сделанные с помощью тега marquee, можно работать только в режиме текстового (HTML) редактора!

Режим текстового редактора WordPress.

Это, конечно же, создает некоторые неудобства. Например, при создании этой статьи, чтобы не заморачиваться с HTML кодом, форматирование текста я производил на копии сайта, расположенной на денвере, и затем текст из текстового редактора копии переносил в текстовый редактор оригинала.

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

Конструктор бегущей строки marquee.

Для упрощения процесса создания бегущей строки на сайте, предлагаю Вашему вниманию конструктор бегущей строки marquee. Всё что Вам нужно – это выбрать направление, выбрать вариант движения, выбрать скорость движения, выбрать цвет фона и код Вашей бегущей строки готов!

 

Надеюсь, что эта статья поможет Вам справиться с задачей, как сделать бегущую строку на сайте с помощью тега marquee. Если у Вас возникнут вопросы, пожалуйста, задавайте их в комментариях.

Если статья Вам понравилась, поделитесь этой статьей с друзьями в социальных сетях.

На эту же тему можно почитать или посмотреть:

Уроки на все случаи жизни

Нажимайте кнопки! Делитесь информацией с друзьями! Нажимайте кнопки! Делитесь информацией с друзьями!

Получайте информацию о новых акциях и новостях на свою электронную почту!

 

Введите адрес электронной почты:

 

 

Как сделать бегущую строку на сайте с помощью тега marquee.: 29 комментариев

    1. admin Автор записи

      Татьяна! Я буду только рад, если мой опус Вам чем-то поможет. Не забывайте, что визуальный редактор не любит тег marquee. В следующей статье я планирую поделиться опытом работы с «безопасной» бегущей строкой. smile

    1. admin Автор записи

      Сергей! Спасибо, что зашли! Кнопки действительно от Pluso, несмотря на то, что некоторые ресурсы считают их потенциально опасными. *pardon*

  1. Зоя

    Спасибо, все так подробно и доходчиво. Бегущий текст поможет привлечь внимание к каким-то наиболее важным моментам, которые необходимо выделить. При этом не очень навязчиво. Понравилось.

  2. Ольга

    Здравствуйте, Сергей! Зашла к Вам в гости, А у Вас много чего полезного есть. Беру себе на заметку, будем общаться. Спасибо за информацию. smile

  3. Лидия

    …не буду оригинальна, если напишу , что материал- супер, беру в закладки и с Вашего позволения буду заходить …конструировать бегущие строки..

  4. Татьяна

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

  5. Светлана

    Особенно впечатляет бегущая строка с картинкой. Очень интересная фишка. Как я поняла, до опубликования в визуальный редактор вообще нельзя заходить?
    Еще одну интересную фишечку у Вас увидела, Сергей! Стрелочка крутящаяся справа внизу. Поделитесь, с помощью чего сделали!

    1. admin Автор записи

      Светлана! Для редактирования статьи или записи с бегущей строкой marquee в визуальный редактор заходить нельзя не до не после опубликования. Как выйти из такой неудобной ситуации, расскажу в одной из следующих статей.
      Стрелочка размещена с помощью jQuery. Об этом тоже в одной из ближайших статей.

  6. Ольга

    Спасибо за статью. Вопрос: можно сделать так, чтобы присутствовало несколько информационных бегущих строк, т.е. чтобы строки с различной информацией появлялись поочередно?

  7. Маргарита

    Очень интересно. Подскажите, пожалуйста, как сделать непрерывно бегущие картинки (одна за другой), как у Вас в последнем варианте, с использованием marquee. Бегущая строка получается, а вот много картинок подряд никак, почему-то вертикально идут, а горизонтально нет. Заранее, спасибо.

    1. admin Автор записи

      Здравствуйте, Маргарита! Чтобы ответить на Ваш вопрос, хорошо бы посмотреть на код Вашей бегущей строки. smile

  8. bytrina

    Бегущая строка это конечно не плохо, но ПС не любят такие вещи как впрочем и что-то подобное, поэтому воздержусь от ее установки себе на блог, а за инфу спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Разместить ссылку на свою статью