2010-11-22

Коды html бегущей строки

   Вначале про бегущую строку лучше почитать в моем первом сообщении. Здесь на простейших примерах и кодах показано, как сделать бегущую строку в html.
Развернутый код бегущей строки:
<marquee width=100 height=100 direction="up" bgcolor=#FFFF55 behavior="scroll" scrollamount="2" scrolldelay="9" style="border: 2px solid #D4FFAA”>Бегущая строка</marquee>
Бегущая строка
Параметры:
marquee задает собственно саму бегущую строку,
width ширина поля, в котором будет бегать текст или картинка,
height высота поля бегущей строки (в примере ширина и высота указаны желтым. Если цвет фона – bgcolor – бегущей строки опустить, не указывать, тогда он будет прозрачным). Если код бегущей строки поместить между тегами <center> и </center>, то бегущая строка “побежит” по центру страницы:
..
Бегущая строка
style="border: – определяет параметры внешней границы фона, ее толщину, цвет, вид. (см. также Границы при помощи border)  direction указывает направление движения. может принимать значения up – вверх, down – вниз, left – движение влево, right – движение вправо.
bgcolor цвет фоны бегущей строки. можно указывать, как в кодовом, так и буквенное обозначение цвета.
style="color:red" – так изменяют цвет текста бегущей строки.
behavior параметр движения. Значения: scroll – прокручивается через страницу, движение вкруговую (как в примере),   slide – стока бежит до края окна и останавливается, alternate – бег “туда-сюда”, влево-вправо.
scrollamount расстояние между точками движения, т.е. чем меньше этот параметр, тем более плавное движение и медленное совершает бегущая строка. Измеряется в целых числах.
scrolldelay – задержка между кадрами.
Если добавить в код бегущей строки onmouseover=this.stop() onmouseout=this.start(), то срока будет останавливать свое движение при наведении на нее курсора. Работает не везде.
loop показывает сколько раз должна циклов должна сделать бегущая строка.
П Л Я Ш У Щ И Е Б У К В Ы !

Движение картинок
1. Движение серии картинок в движущемся поле:

При этом в последнем случае необходимо следить, чтобы значение ширины внешнего фона принимало большие значения, чем ширина фона, по которому двигаются картинки (на скриншоте отмечены желтым):
2010-11-23_0108
Разнонаправленное двжение картинок



   то же самое на цветном фоне:


   Встречное движение картинок можно оформить в виде таблицы:

10 комментариев :

yurij комментирует...

Очень вовремя!
А как запустить баннеры при наведение на которые курсором последние останавливались и давали ссылку на сайт или блог???

NATALKA комментирует...

Очень рада, Юрий, что вам понравилось сообщение. Баннер при помощи бегущей строки можно сделать следующим образом: нужно создать код, который будет состоять из обычного кода бегущей строки (выделено в скриншоте желтым); кода, отвечающего за остановку строки при наведении на нее курсора (выделено зеленым) и собственно самих ссылок на сообщения (отмечено красным). Скрин можете постмотреть по ссылке http://r-img.fotki.yandex.ru/get/6001/i-nat2010.f/0_42fc8_519a665e_orig"

Скопировать код можете отсюда:
<marquee width=100 height=100 direction="down"
bgcolor=#FFFF55 behavior="scroll" scrollamount="2" scrolldelay="9"
style="border: 2px solid #D4FFAA" align=center
onmouseover=this.stop() onmouseout=this.start()>
<a href="URL сообщения 1">название ссылки 1</a><br/>
<a href="URL сообщения 2">название ссылки 2</a><br/>
<a href="URL сообщения 3">название ссылки 3</a><br/>
...<a href="URL сообщения N">название ссылки N</a>
</marquee>

yurij комментирует...

Natalka СПАСИБО!!!

NATALKA комментирует...

Пожалуйста!)))

yurij комментирует...

Natalka добрый вечер! Опять нуждаюсь в вашей помощи. Сделал по вашей рекомендации крутилку баннеров, но там появляется красная полоса (фон крутилки). Можно ли его как-то убрать или сделать чтобы он не показывался? И сделать так, чтобы баннер останавливался на насколько секунд в окошке как у BlogUpp.

yurij комментирует...

Да еще, как вы сделали что комментарии публикуются сразу в блоге без "одобрения" ? Забыл, крутилку баннеров делал на
http://fishinform.blogspot.com/

NATALKA комментирует...

Юрий, это можно сделать в настройках комментариев. Там есть такой пункт "Ввод комментариев", который и означает их модерацию, т.е. если у вас активирован пункт Всегда, то модерация будет. Отмена модерации - активированный пункт Никогда. Только для сообщений старше N дн. - это промежуточный вариант.

NATALKA комментирует...

P.S. Интересный у вас получился вариант с баннерами. Я иногда встречаю такое на сайтах. Главное - экономит место.

Анонимный комментирует...

а есть ли возможность сделать строку сплошной. Ну обычно выглядит так картинка например
1...2...3____пробел____1...2...3

хочется что бы было 1...2...3...1...2...3 без разделения

NATALKA комментирует...

С помощью кодов html такое сделать не удастся, существуют специальные скрипты для этого. Однако, вариантом выхода является составление очень длинной бегущей строки.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности