Сегодня мы научимся делать слайд-шоу собственными руками, без испоьзования плеера с Яндекс-Фоток. Для этого вначале познакомимся с "бегущей строкой".
Все бегущие строки создаются с помощью тэгов <marquee>...</marquee>
- Код:
-
<marquee>Текст движется </marquee>
<marquee>Текст движется </marquee>
По умолчанию строка движется справа налево.
Чтобы изменить направление движения, используем в тэге
- Код:
-
<marquee>
атрибут direction, задающий направление движения.
Для движения направо:
- Код:
-
<marquee direction="right">Текст движется направо </marquee>
<marquee direction="right">Текст движется направо </marquee>
Для движения вверх:
- Код:
-
<marquee direction="up">Текст движется вверх</marquee>
<marquee direction="up">Текст движется вверх</marquee>
Для движения вниз:
- Код:
-
<marquee direction="down">Текст движется вниз</marquee>
<marquee direction="down">Текст движется вниз</marquee>
Кроме команды direction тэг
- Код:
-
<marquee>
может содержать атрибут behavior, задающий поведение бегущей строки.
behavior="scroll" –прокрутка текста. Это значение можно не указывать, т.к. текст по умолчанию всегда прокручивается.
Вот ещё несколько кодов (не всегда нужны):
- Код:
-
<marquee behavior="scroll"> Текст прокручивается </marquee>
- Код:
-
<marquee behavior="slide">
- Текст прокручивается и останавливается
- Код:
-
<marquee behavior="alternate"> Текст движется от края к краю</marquee>
Другие aтрибуты:
scrollamount="1" – скорость движения строки. Может изменяться от 1 до 9.
scrolldelay="20" – Этот атрибут задаёт временной интервал в миллисекундах между шагами бегущей строки.
width="200" – ширина бегущей строки в пикселях или процентах от ширины экрана.
height="17" – высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляйте свой цвет).
loop="2" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).
hspace="70" - атрибут задает поле в пикселах справа и слева от бегущей строки.
vspace="70" - атрибут задает отступ в пикселах выше и ниже бегущей строки.
Чтобы двигалась картинка, заменим текст между тегами
- Код:
-
<marquee>...</marquee>
ссылкой на картинку:
- Код:
-
<marquee><img src="http://img-fotki.yandex.ru/get/3600/terytatyana.2/0_2d925_37bd2fdc_S.jpg"> </marquee>
<marquee><img src="http://img-fotki.yandex.ru/get/3600/terytatyana.2/0_2d925_37bd2fdc_S.jpg"> </marquee>