Среда, 13.11.2019, 23:44
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Как сделать бегущую строку на сайте

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

В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML - marquee. Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте - это уже давно не модно. Про такие сайты говорят, что они из прошлого века. На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Несмотря на это, есть масса других способов как можно донести до пользователя полезную информацию.

Тег Marquee

В HTML есть специальный тег для создания бегущей строки: <marquee>...</marquee>. У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками ни у кого не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.

Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript (в этой статье мы не будем рассматривать этот метод).

Для начала немножко синтаксиса тега marquee:

<marquee атрибут="параметр" ...>

Объекты, которые должны перемещаться

</marquee>


Атрибуты и параметры тега marquee

1. width="число/процент" - задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:
width="240px" - задает ширину в 240 пикселей;
width="40%" - задает ширину в 40% в зависимости от ширины блока, в котором находится объект.

2. height="число/процент" - задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:
height="400px" - задает высоту в 400 пикселей;
height="30%" - задает высоту в 30% в зависимости от высоты блока, в котором находится объект.

Примечание: если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx.

3. bgcolor="цвет" - задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов. Примечание: если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.

4. behavior="параметр" - это один из самых важных атрибутов бегущий строки. Он задает параметр, по которому осуществляется поведение бегущей строки. Имеет довольно много параметров:
alternate - бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:

<marquee width="400" height="50" behavior="alternate"></marquee>

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="alternate"

 

scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:

<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="scroll" direction="left"

slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:

<marquee width="400" height="50" behavior="slide" direction="right"></marquee>

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="slide" direction="right"

5. direction="параметры" - задает направление движения бегущей строки. Принимает следующие параметры:
down - движение сверху вниз. Например:

<marquee width="400" height="50" behavior="scroll" direction="down"></marquee>

 А так эта строка выглядит на сайте:

down - движение сверху вниз.

 

up - движение снизу вверх. Например:

<marquee width="400" height="50" behavior="scroll" direction="up"></marquee>

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="scroll" direction="up"

left - движение справа налево. Примечание: left установлено по умолчанию. Например:

<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>

А так эта строка выглядит на сайте:

Строка с атрибутом behavior="scroll" direction="left"

 

right - движение слева направо. Например:

<marquee width="400" height="50" behavior="scroll" direction="right"></marquee>

 Так эта строка выглядит на сайте:

Строка с атрибутом behavior="scroll" direction="right"

6. hspace="число" - задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img.

7. vspace="число" - задает отступ по вертикали до других объектов.

8. loop="число" - какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки, по умолчанию установлено -1.

9. scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:

<marquee width="400" height="50" crollamount="10"></marquee>

Так эта строка выглядит на сайте:

Строка с атрибутом scrollamount="10"

10. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Например:

<marquee width="400" height="50" scrolldelay="500"></marquee>

Так эта строка выглядит на сайте:

Строка с атрибутом scrolldelay="500"

На этом описание тега marquee можно завершить. Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:

<marquee width="400" height="50"> <div style="width:200px" class="quote">Бегущий элемнет div</div> </marquee>

Бегущий элемнет div

Бегущий элемнет div

Пример бегущего изображения:

<marquee width="400" height="50"> <img src="img/smailik.jpg"</div> </marquee>

 

Читайте также:
• Добавление счетчика посещений на сайт
• Как сделать выпадающие меню
• Как сделать favicon
• Как сделать красивую подсказку для ссылок
• Как увеличивать изображения (все способы)
• Как добавить социальные кнопки на сайт

Перейти в каталог html уроков и советов

 

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz