• Авторизация


Как сделать бегущую строку 01-01-2014 22:56 к комментариям - к полной версии - понравилось!

Это цитата сообщения ЛИНА_-_ЛИНОЧКА Оригинальное сообщение

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

ЛиРу - как сделать бегущую строку ( плюс дополнение к "html для начинающих")



ЛиРу - как сделать бегущую строку ( плюс дополнение к "html" для начинающих)

Как говорится,- меня попросили,- вот и пишу:-)
Не совсем в "тему" т.к. про html- это еще рано. Но пусть будет, т.к. сие можно использовать на нашем любимом лиру:-)
В посте будут написаны не все "параметры" и "нужности", а только необходимый минимум. Остальное мы рассмотрим позже в теме про html.
Поехали:-)

Есть такой специальный тег "marquee", который и поможет вам сделать бегущую строку. Изначально он работал только в браузере Internet Explorer, но теперь почти во всех браузерах.
Лично я проверил,- не работает только в Google Chrome, а в Mozilla Firefox иногда зависает,- надо просто обновить страничку и все заработает:-) А в Opera и Internet Explorer,- работает без проблем:-) Так что имейте это в виду.
Сразу оговорюсь, бегущей строкой может быть не только текст, но и картинка, ссылка например. Покажу наглядно:-)
Вот допустим две картинки:
 (157x148, 38Kb)  (160x118, 31Kb)
Применяя этот "код",- вот что получим:

 (160x118, 31Kb)




 (157x148, 38Kb)

А теперь о главном:-)
Итак, пишем в нужном нам месте такой код:

<marquee behavior="scroll" direction="right" scrollamount="3" bgcolor="#ffffff">

Сам текст бегущей строки. ( Или код картинки)

</marquee>


Вот что у нас получится в результате:

Сам текст бегущей строки.


Текст можно форматировать так же, как и просто в посте. Например сделаем его большим и жирным:

<marquee behavior="scroll" direction="right" scrollamount="3" bgcolor="#ffffff">

[size=3][b] Сам текст бегущей строки. ( Или код картинки)[/b][/size]

</marquee>


В результате получим:

Сам текст бегущей строки. ( Или код картинки)


Теперь разберем код по частям, чтобы понять, что в нем можно изменить, и что нам это даст:

1. - behavior="scroll" - здесь, вместо слова "scroll" можно поставить другие. Какие что обозначают:

scroll - ваш текст будет перемещаться в указанном направлении ( об этом читайте чуть ниже), потом дойдя до границы ( конца поста или коммента),- исчезнет и начнет движение сначала.
Пример:
Сам текст бегущей строки.
alternate - ваш текст будет перемещаться справа налево и обратно. Исчезать не будет,- такое маятниковое движение короче говоря:-)
Пример:
Сам текст бегущей строки.
slide - ваш текст будет перемещаться в указанном направлении ( об этом читайте чуть ниже), потом дойдя до границы ( конца поста или коммента),- остановится на месте.
Пример:
Сам текст бегущей строки.

2. - direction="right" - это как раз то самое указание направления. Здесь, вместо слова "right" можно поставить другие. Какие что обозначают:
down - ваш текст будет двигаться сверху вниз
up - снизу вверх
left - справа налево
right - слева направо

Обойдемся без примеров, думаю,- и так все понятно:-)

3. - scrollamount="3" - этот параметр отвечает за скорость движения текста. Меняем циферку "3" на другую и смотрим. Чем больше число- тем быстрее будет двигаться текст.

4. - bgcolor="#ffffff" - параметр отвечающий за цвет фона, по которому будет бежать строчка. Что за цвет такой "#ffffff" - мы уже говорили ТуТ. А теперь пример на черном фоне ( #000000 ), т.к. буквы у меня тоже черные,- вы их не увидите, поэтому поменяю им цвет:

текст



Вот и все:-) Возникнут вопросы,- пишите либо СЮДА либо в личку:-)) Удачи:-)

P.S. Друзья мои! Когда цитируете, возможно плохое отображение:-( Т.к. по вашим личным настройкам дневника, цвет текста у некоторых белый. Вот он и не виден на белом фоне:-( Но это не страшно. Как изменить цвет текста написано в конце поста:-)))
вверх^ к полной версии понравилось! в evernote
Комментарии (2):
03-04-2014-07:33 удалить
почему не проходит первая картинка,движение начинается только со второй?и при замене движения "слева на право"на "снизу вверх"не реагирует,а картинка движется так как изначально предложена ссылочка,возможно это зависит от браузера?у меня Яндекс. И возможно ли данное новшество применять как слайд-шоу в изготовлении плейкаста?Заранее Вам благодарна!Натали
Ответ на комментарий # Доброе время суток Натали! Я проверила движение нескольких картинок, всё получается, будьте внимательны. Можно использовать при создании плейкастов, я пользовалась старым редактором. Удачи!


Комментарии (2): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Как сделать бегущую строку | Валентинка555 - Дневник Валентинка555 | Лента друзей Валентинка555 / Полная версия Добавить в друзья Страницы: раньше»