"Полоса прокрутки" текста или картинок - бегущая справа налево строка
Для того, чтобы получить строку текста или картинок, бегущую справа налево, в код страницы там, где должна показываться строка, вставляем:
<marquee behavior="scroll" direction="left" bgcolor="#FF0000" width="200" height="25" scrolldelay="10" loop="infinite">Ваш текст </marquee>
Для этого тега можно опционально задать следующие атрибуты, или свойства бегущей строки:
Aling - выравнивание текста
Возможные значения:
LEFT - по левому краю
RIGHT - по правому
MIDDLE - по центру
BOTTOM - по нижнему
Behavior - поведение текста (Способ движения)
Возможные значения
SCROLL - движется в одном направлении, постепенно исчезая из поля зрения
SLIDE - доезжает до края и останавливается
ALTERNATE - ездит от края к кра
Scrolldelay - задержка смещения (интервал в миллисекундах между показами текста на разных позициях, создающими эффект анимации)
Возможные значения: любое числовое
Loop - число проигрываний
Возможные значения
число
INFINITE - бесконечное проигрывание
Widht - ширина поля
Height - высота поля
Direction - направление движения
Возможные значения
LEFT
RIGHT
UP
Bgcolor - фон поля бегущей строки
Vspace - отступ сверху и снизу поля
Чтобы строка останавливала движение при наведении мыши в тег надо добавить
onMouseOver="this.stop()"
onMouseOut="this.start()"
Например
<marquee onMouseOver="this.stop()" onMouseOut="this.start()"> Ваш текст </marquee>
Непрерывно бегущая строка
<SCRIPT LANGUAGE=’JavaScript’>
function
outmsg(msg,ctrlwidth)
{
msg = " --- "+msg
newmsg =
msg
while (newmsg.length < ctrlwidth) {newmsg +=
msg}
document.write (’<FORM NAME="Outmsg">’)
document.write
(’<CENTER><INPUT NAME="outmsg" VALUE= "’+newmsg+’" SIZE=
’+ctrlwidth+’></CENTER>’)
document.write
(’</FORM>’)
rollmsg()
}
function
rollmsg()
{
NowMsg=document.Outmsg.outmsg.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Outmsg.outmsg.value
=
NowMsg
bannerid=setTimeout("rollmsg()",100)
}
</SCRIPT>
<SCRIPT
language=’JavaScript’>
outmsg("Вы видите строку! Она бежит!
УРА!!!",70)
</script>
1. Функция outmsg() имеет 2
параметра:
- msg - текст сообщения для
циклического вывода,
- ctrlwidth - ширина поля
вывода в символах.
К тексту msg добавляем слева
символы --- , чтобы не сливались предыдущий и
последующий экземпляры текста.
В переменную newmsg
запишем непрерывную последовательность из ctrlwidth
экземпляров текста msg.
В форме Outmsg определяем текстовую переменную outmsg длиной ctrlwidth символов и с
начальным значением newmsg.
Вызываем программу
прокрутки rollmsg().
2. Функция rollmsg() выполняет следующие действия:
- Записать в
newmsg текущее содержимое строки текста,
-
Самый первый символ текста переставляем в конец(здесь и достигается эффект
прокрутки ,
- Полученный текст пересылается назад, в форму.
- Функция setTimeout("rollmsg()",100) выполняет задержку
функции rollmsg с интервалом в 100 миллисекунд.
3.
Вызываем функцию outmsg с соответствующими
параметрами.
Ещё одна
<html>
<head>
<script language="JavaScript">
<!--
var position=0;
function ticker()
{
var k;
var msg="++++ Самая лучшая бегущая строка в мире! ";
k=(75/msg.length)+1;
for (i = 0; i <= k; i++)
{
msg+=" "+msg;
document.Outmsg.outmsg.value=msg.substring(position,position+75);
}
if (position++==msg.length){ position=0;}
id=setTimeout("ticker()",100);
}
//--<
</script>
</head>
<body onLoad="ticker();">
<form name="Outmsg">
<input type="text" name="outmsg" size="19">
</form>
</body>
</html>
Этот пример настолько прост и компактен, что, я думаю, он не нуждается в
комментарии.
