Бегущая строка

ГлавнаяJava скрипты → Бегущая строка

Мы довольно часто сталкиваетесь с данным компонентом, как Бегущая строка, и объяснять её предназначение не имеет смысла. Текст в "Бегущей строке" выглядит красиво, привлекает внимание, и что не мало важно в отличие от скрипта "Скрытый текст", легко читается поисковиками и соответственно индексируется. Но, сразу хочу дать совет: не стоит злоупотреблять такими эффектами, потому как излишнее мельтешение перед глазами посетителей, начинают последних раздражать. Где в итоге на таких страницах долго задерживаться не будут.
При создание и наполнение сайта данный эффект текствовой строки не очень пользуется популярностью у веб-мастеров, но тем не менее его многие до сих пор используют.

Атрибуты для "Бегущая строка"

Для того, что бы получить бегущую строку, нужно просто текст заключить в специальные теги: <marquee> ваш текст </marquee>. И я хочу вас познакомить с основными атрибутами для "Бегущая строка". Начнём с самого простого кода "Бегущая строка".

Строка бежит справа налево по всей ширине, движется строго горизонтально и не содержит дополнительных атрибутов, кроме цвета.

HTML код этой бегущей строки:


<marquee><font color="red"> Строка бежит справа налево ... и т.д.</font></marquee>

Далее расмотрим тот же пример, только зададим определённую ширину для строки, местоположение, фон, определённую скорость и заключим в рамку с помощью таблицы. Атрибуты здесь используются следующие:

Для бегущей строки:

  • Behavior="scroll" - движение в одном направлении (ставить не обязательно);
  • width="500" - задаём ширину строки;
  • Bgcolor="#003399" - цвет фона;
  • scrollamount="2" - скорость движения строки.

Для таблицы:

  • width="500" - ширина таблицы;
  • border="2" - толщина рамки;
  • bordercolor="red" - цвет рамки.
Данная строка имеет определённые размеры, располагается по центру, имеет свой фон, цвет и толщину рамки, и бежит с заданной скоростью.

HTML код этой бегущей строки:


<center>
 <table width="500"  border="2" bordercolor="#00ccff">
  <tr>
   <td>
    <marquee Behavior="scroll" width="500"  Bgcolor="#003399" scrollamount="2">
     <font color="#ffffff"> Данная строка имеет определённые ... и т.д.</font>
     </marquee>
    </td>
   </tr>
  </table>
 </marquee>
</center><br />

Теперь рассмотрим случай, когда бегущая строка не выходит за отведённые пределы рамки и движется от края до края. Здесь за такое движение отвечает атрибут: alternate

От края до края.

HTML код этой бегущей строки:


<center>
 <table width="300"  border="1" bordercolor="#003399">
  <tr>
   <td>
    <marquee Behavior="alternate" width="300"  Bgcolor="#00ccff" scrollamount="3">
     <font color="#ffffff"> Строка движется от края до края.</font>
     </marquee>
    </td>
   </tr>
  </table>
 </marquee>
</center><br />

Далее рассмотрим случай когда бегущая строка движется вертикально: снизу-вверх, и останавливалась при наведении мыши. За любое направление движения строки отвечает атрибут: Direction в данном случае его значение "up" - вверх. Этот атрибут вы можете использовать во всех случаях, указывая нужное движение: "left" - справа налево, "right" - слева направо, "up" - снизу вверх, "down" - сверху вниз.

Движение бегущей строки вертикальное: снизу-вверх. Остонавливается при наведении мыши. Данный эффект довольно часто используется на сайтах ввиде например: "Новостей".


HTML код этой бегущей строки:


<center>
<table width="180" height="210" border="3" bordercolor="red">
 <tr>
 <td>
<marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="180" height="210" scrollamount="1" 
Direction="up" Bgcolor="f7f2a2"><p>Движение бегущей строки и т.д....
</p></font></marquee></td></tr></table></marquee></center><br />

Ну вот, вроде основные параметры для бегущей строки мы с вами рассмотрели.

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

Поделись ссылкой с друзьями:

Комментарии к статье

Зиг-Заг 01-12-13

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

Admin 09-12-13


Если честно, то я о таком и не слышал даже))

Дмитрий 13-03-14

У меня бегущая строка расположена на каждой странице сайта и чтобы добавить в нее объявление нужно редактировать каждую страницу. Нужно чтобы бегущая строка брала весь текст например из одного текстового файла. Есть ли такая? Где можно взять? перерыл весь интерент подходящего найти не могу

Admin 13-03-14

Об этом у меня описано в статье - Вывод PHP на HTML
Перейдите на главную страницу и в Содержание выберите нужный пункт. По крайней мере, у меня так отображалась бегущая строка на всех страницах, где изменения текста в ней, я делал только в одном файле.