Бегущая строка как это сделать


  • Главная » Основы HTML » Бегущая строка на HTML. Основы HTML для начинающих. Урок №9


    16.09.2015


    21:33


    10979


    8


    Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

    Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

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

    <marquee></marquee>

    Пример:

    <html> <head> <title>Бегущая строка</title> </head> <body> <marquee>Бегущая строка</marquee> </body> </html>

    Результат:

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

    атрибуты для бегущей строки
    цвет фона бегущей строки
    Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee» атрибут «bgcolor»:

    <marquee bgcolor ="#ccc">Бегущая строка</marquee>

    Результат:
    Бегущая строка

    ○ высота и ширина бегущей строки
    Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee» атрибут «width» и «height»:

    <marquee bgcolor ="#ccc" width ="100px" height ="40px">Бегущая строка</marquee>

    Результат:

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

    ○ поведение бегущей строки
    Добавьте к тегу «marquee» атрибут «behavior» с такими значениями:

    scroll - обычная прокрутка (по умолчанию);

    slide – строка начинает свой путь из одного края и останавливается у другого;

    alternate – строка будет двигаться от края до края

    Пример:

    <marquee behavior="scroll">обычная прокрутка (по умолчанию)</marquee> <marquee behavior="slide">Бегущая строка перейдет из одного края и остановится у другого</marquee> <marquee behavior="alternate">строка будет двигаться от края до края</marquee>

    Результат:

    обычная прокрутка (по умолчанию)

    Бегущая строка перейдет из одного края и остановится у другого

    строка будет двигаться от края до края

    ○ направление бегущей строки
    Добавьте к тегу «marquee» атрибут «direction» с такими значениями:

    left – движение текста влево (по умолчанию);

    right – движение текста вправо;

    up – движение текста снизу вверх;

    down - движение текста сверху вниз

    Пример:

    <marquee direction="left">движение текста влево (по умолчанию)</marquee> <marquee direction="right">движение текста вправо</marquee> <marquee direction="up" height ="50px">движение текста снизу вверх</marquee> <marquee direction="down" height ="50px">движение текста сверху вниз</marquee>

    Результат:

    движение текста влево (по умолчанию)

    движение текста вправо

    движение текста снизу вверх

    движение текста сверху вниз

    ○ скорость бегущей строки
    Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee» атрибут «scrollamount»:

    <marquee scrollamount="110">Бегущая строка</marquee>

    Чем больше значение, тем больше скорость.

    Результат:

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

    ○ задержка интервала передвижения бегущей строки
    Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee» атрибут «scrolldelay»:

    <marquee scrolldelay="1000" >Бегущая строка</marquee>

    Результат:

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

    ○ количество проходов бегущей строки
    Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee» атрибут «loop»:

    <marquee loop="2" >Бегущая строка</marquee>

    В примере стоит значение «2», это значит, что проходов будет только два.

    ○ отступы бегущей строки
    Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee» атрибут «hspace»:

    <marquee hspace="250" >Бегущая строка</marquee>

    Результат:

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

    Как вставить в бегущую строку изображение

    Чтобы вставить бегущую строку в картинку, вставьте между тегами <marquee></marquee> уже известный вами тег для вывода картинки <img>:

    <marquee direction="right"><img src="1.gif"></marquee> <marquee direction="right"><img src="2.gif"></marquee>

    Результат:


    Все атрибуты для тега <marquee> действуют и в этом случае.

    Как вставить в бегущую строку ссылку

    Здесь тоже вовсе не сложно. Как вставлять ссылку в HTML документ вы знаете. Как сделать бегущую строку вы тоже уже знаете. Достаточно вставить в текст бегущей строки ссылку и все:

    <marquee>Бегущая строка на блоге <a href="http://stepkinblog.ru/">StepkinBlog.ru</a></marquee>

    Пример:

    <html> <head> <title>Бегущая строка</title> </head> <body> <marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">Бегущая строка на блоге<a href="http://stepkinblog.ru/"> StepkinBlog.ru</a></marquee> </body> </html>

    Результат:

    Бегущая строка на блоге StepkinBlog.ru

    На сегодня это все! Жду вас на следующем уроке. Удачи!

    Предыдущая запись
    Создание списков на HTML. Основы HTML для начинающих. Урок №8 Следующая запись
    Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

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



    Рекомендуем посмотреть ещё:


    Закрыть ... [X]

    Бегущая строка светодиодная своими руками: руководство по Как сделать новую марку автомобиля

    Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать Бегущая строка как это сделать