tutoriais

Flash

FrontPage

Dreamweaver

Dhtml

Html

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE DHTML

Botões com texto que desfila.

Um botão fora do comum. Aparecem, desaparecem e desfilam.

Demo:

1. Inserir entre os tags <HEAD>...</HEAD>:

///////////////// NAO modificar NADA abaixo desta linha //////////////
lineText=""
timerID=null
timerRunning=false
spaces=""
charNo=0
charMax=0
charMiddle=0
lineNo=0
lineWait=0
// Define line object
function Line(text, url, type, wait) {
this.text=text
this.url=url
this.Display=type
this.wait=wait
}
// Fill a string with n chars c
function StringFill(c, n) {
s=""
while (--n >= 0) {
s+=c
}
return s
}
function Static() {
document.formDisplay.buttonFace.value=this.text
timerID=setTimeout("ShowNextLine()", this.wait)
}
function Grow() {
lineText=this.text
lineWait=this.wait
charMax=lineText.length
TextGrow()
}
function TextGrow() {
if (charNo <= charMax) {
document.formDisplay.buttonFace.value=lineText.substring(0, charNo)
charNo++
timerID=setTimeout("TextGrow()", growWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}

function Expand() {
lineText=this.text
charMax=lineText.length
charMiddle=Math.round(charMax / 2)
lineWait=this.wait
TextExpand()
}

function TextExpand() {
if (charNo <= charMiddle) {
document.formDisplay.buttonFace.value=lineText.substring(charMiddle - charNo, charMiddle + charNo)
charNo++
timerID=setTimeout("TextExpand()", expandWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}

function Scroll() {
spaces=StringFill(" ", scrollWidth)
lineText=spaces+this.text
charMax=lineText.length
lineText+=spaces
lineWait=this.wait
TextScroll()
}

function TextScroll() {
if (charNo <= charMax) {
document.formDisplay.buttonFace.value=lineText.substring(charNo, scrollWidth+charNo)
charNo++
timerID=setTimeout("TextScroll()", scrollWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}

function StartHeadliner() {
StopHeadliner()
timerID=setTimeout("ShowNextLine()", 1000)
timerRunning=true
}

function StopHeadliner() {
if (timerRunning) { 
clearTimeout(timerID)
timerRunning=false
}
}

function ShowNextLine() {
(lineNo < lineMax) ? lineNo++ : lineNo=1
lines[lineNo].Display()
}
function GotoUrl(url){
top.location.href=url
}
// -->
</script>

No início do script defina-se o a cor (background) e o formato do texto (color, family, size...) do botão em folha de estilo.

.stHeadliner {font-family: arial;
font-size: 10pt;
font-weight: bold;
font-style: italic;
background: orange;
color: white}

Configuração do efeito:

Tempo de espera em milisegundos para o efeito grow
growWait=90
Tempo de espera em milisegundos para o efeito expand
expandWait=120
Tempo de espera em milisegundos para o efeito de desfilo (scroll)
scrollWait=100
Quantidade de caracteres para a zona de desfilo (scroll)
scrollWidth=30
Quantidade de linhas (pode-se útilisar quantas linhas se desejar)
lineMax=4
Definir as linhas (texto, url, efeito, tempo de espera)
lines[1]=new Line("Para cada frase", "#", Expand, 2000)
lines[2]=new Line("pode por un link!", "#", Scroll, 1000)
lines[3]=new Line("Fantástico!...", "#", Grow, 2500)
lines[4]=new Line("-- Truques e Dicas ! --", "#", Static, 4000)

2. Inserir entre os tags <BODY>...</BODY>:

3. Inserir dentro tags <BODY>:

ANÚNCIOS