Динамическая смена строк.

Описание:

Инструкция:

<style type="text/css">
<!-- Здесь задаются абсолютные координаты текста -->
.textstyle    {
    position:absolute;
    left:-2000px;
width:420px;
font-family:Arial;
font-size:16pt;
font-weight:bold;
text-align:center;
    color:FFFFFF;
filter:glow(color=red,strength=2);
}

.coverstyle    {
    position:absolute;
    left:-2000px;
}
</style>
<script LANGUAGE="JavaScript1.2">

/*
Библиотека скриптов Юрия Сергеева,   http://www.crosswinds.net/~ysergeev/money.htm
EMail: ysergeev@mail.ru
*/

var message = new Array()
message[0]="Добро пожаловать на сайт http://www.crosswinds.net/~ysergeev/money.htm"
message[1]="Секреты заработка в Интернет, бесплатный софт, документация, Web-дизайн и многое другое..."

var i_message=0

// Изюминка этого скрипта - простой gif-рисунок arrow.gif , который перемещается вдоль текста.

// Задайте верхний (covertop) и левый (coverleft) отступы текста (в пикселах).
var covertop=20
var coverleft=130

// Задайте размер  gif-рисунка.
// Вы можете создать свой рисунок.
// "coverwidth"  представляет ширину покрываемой текстовой зоны, а "coverheight" - ее высоту.
var coverwidth=1200
var coverheight=96

var texttop=covertop
var textleft=coverleft
// Задайте ширину текста в переменной "textwidth"
// Имейте ввиду, что параметр "textwidth" взаимосвязан с аналогичным параметром "width" в тэге <style>
var textwidth=450
var textheight=coverheight

var cliptop=0
var clipright=textwidth
var clipbottom=coverheight
var clipleft=0

var clippoints

// Задайте величину смещения картинки в пикселах и скорость эффекта динамической смены строк
var step=370
var pause=700

var timer

function init() {
if (document.all) {
    document.all.text.style.posTop=texttop
document.all.text.style.posLeft=textleft
document.all.cover.style.posTop=covertop
document.all.cover.style.posLeft=coverleft
clipleft=0
fadeout()
}
}

function fadeout() {
if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) {
clipleft+=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft-=step
timer= setTimeout("fadeout()",pause)
}
else {
clearTimeout(timer)
i_message++
if (i_message>=message.length) {i_message=0}
text.innerHTML=message[i_message]
fadein()

}
}

function fadein() {
if (document.all.cover.style.posLeft <=coverleft) {
clipleft-=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft+=step
timer= setTimeout("fadein()",pause)
}
else {
clearTimeout(timer)
init()
}
}

</script>

</head>

<script language="JavaScript1.2">
if (document.all&&window.print){
document.write('<DIV ID="text" class="textstyle">'+message[0]+'</div>')
document.write('<DIV ID="cover" class="coverstyle"><img src="arrow.gif"></DIV>')
}
</script>

</body>

Источник материалов: http://dynamicdrive.com/

Copyright © 2001 г. Юрий Сергеев

При использовании материалов обязательна ссылка на
  http://www.crosswinds.net/~ysergeev/money.htm

Динамическая смена строк.