Компьютерный портал IT-BAZA.msk.ru
Реклама
Какой форумный движок вам больше нравится?

Всего голосовало: 878
Главная » Обзоры » uCoz

Бегущая строка в Internet Explorer - элемент <MARQUEE>
Печать · Добавил: NikS (03.03.09) · Просмотров: 1406

Бегущую строку можно применять, там где мало места. Например на главной (ну и других) страницах сайта, для анонсирования новостей или ещё чего подобного.

Бегущая строка создаётся с помощью тэгов <marquee> и </marquee>. Достаточно всего на всего написать какой-ни будь текст между этими тэгами и он при просмотре в браузере будет двигаться (прокручиваться) в левую сторону.

<marquee>Здесь текст бегущей строки</marquee>

Естественно тэг <marquee>, как и большинство других HTML тэгов имеет специальные атрибуты, в которых можно задать нужные свойства.

Вот пример кода бегущей строки с использованием некоторых атрибутов: 

<marquee scrollamount="1" scrolldelay="20"width="200" height="17" bgcolor="#E9E9D1" behavior="scroll"direction="left">Бегущая строка</marquee>

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

scrollamount="1" – скорость движения строки. (Рекомендуется ставить скорость"1", в этом случае строка выглядит более удобочитаемо и не дёргается)

scrolldelay="20" – Этот атрибут задаёт временной интервал между шагами бегущей строки.

width="200" – ширина бегущей строки в пикселях.

height="17" – высота бегущей строки. (Если Вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляете свой цвет). 

direction="left" – Задаёт направление движения бегущей строки. В данном случае это "left" влево. Но также может применять значения "right" вправо, "up" вверх, "down" вниз.

Т.е. вот пример разных направлений движения:

direction="right" –  движение текста вправо.

Строка

direction="up" – движение текста в верх.

Строка

direction="down" – движение текста вниз.

Строка

Кстати при создании бегущей строки движущейся влево, необязательно писать атрибут direction="left" т.к. по умолчанию она всегда движется влево и по этому чтобы место не занимать можно не писать.

loop="2" – задаёт число проходов бегущей строки. (Еслиуказать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).

hspace="70" - Этот атрибут задает смещение в пикселах в право бегущей строки.

vspace="70" - Этот атрибут задает пустое пространство выше и ниже бегущей строки.

Атрибутbehavior позволяет управлять свойствами движения текста, принимая разные значения:

behavior="scroll" – Прокрутка текста (в большинстве случаев можно не указывать, т.к. текст по умолчанию всегда прокручивается).

behavior="slide" – Прокрутка текста с остановкой.

behavior="alternate" – Движение от края к краю. Пример строки

Атрибуты управляющие движением текста можно группировать. Например написав стразу два атрибута direction="up" и behavior="alternate" текст будет двигаться от верха к низу и обратно.

Используя два атрибута direction="up" иbehavior="slide" текст поднимается снизу вверх и достигнув самого верха останавливается.

Для более красивого оформления бегущей строки можно выделить края подставив:

style="BORDER: #000000 1px solid"

Здесь #000000 - это цвет, а 1px - толщина границ бегущей строки в пикселях.

В результате получится такой код:

<marqueestyle="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20" width="200"height="17" bgcolor="#E9E9D1"align="middle" direction="left">Бегущая строка</marquee>

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

Изменение текста бегущей строки

Для изменения текста его нужно как обычно обставить нужными тегами и всё это поместить например в предыдущий html код бегущей строки.

<marqueestyle="BORDER: #000000 1px solid" scrollamount="1"scrolldelay="20" width="200"height="17" bgcolor="#E9E9D1"align="middle" direction="left">

<b><i><fontface="Arial" size="2" color="#CC3300">Бегущая строка</font></i></b></marquee>

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

Для более удобного применения бегущей строки, можно добавить в неё несколько элиментов скрипта. В примере ниже добавлено двеследующие функции:

onmouseover=this.stop(); - при наводе курсора мыши текст остановится;
onmouseout=this.start(); - при убирании курсора мыши текст продолжит своё движение.

Пример получившегося кода:

<marquee onmouseover=this.stop(); onmouseout=this.start(); style="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20"width="115" height="70" bgcolor="#E9E9D1" align="middle"direction="up"><fontface="Verdana" size="2">Бегущая строка</font></marquee>

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

Примечание - в браузере Netscape всё это может не работать :(



Источник: http://zakachki.cn/index/0-25

Теги: Бегущая строка, <MARQUEE · Рейтинг: 0.0/0

Разгон видеокарт
Запрещение запуска программ
Новости и отличия Windows 7 Release Candidate. Часть 1

Всего комментариев: 2
0  
2 NikS   (09.03.09 17:25)
Всё! Кнопку переделал, друзья сайта исправил! biggrin

+1  
1 Caster   (04.03.09 16:24)
Дизайн сайта не очень, (инфа то норм, плохо ток цветовое оформление) + друзья сайта и кнопка куево зделано.
Ответ: Кнопкой сайта в ближайшее время займусь, а дизайн очень хороший (мягкий - глаза от него не устают), друзья сайта скоро будут улучшены!

Имя *:
Email:
Код *:
E-mail:
Пароль:
Онлайн всего: 3
Гостей: 1
Пользователей: 2
lubs, kot

[ Сегодняшние посетители ]
IT-Baza.Msk.Ru 2008-2010 © Все права защищены
Условия использования · Контакты · Хостинг от uCoz  
  Rambler's Top100