Informações deslizantes para páginas com pouco espaço

Este código é versátil, pois pode ser utilizado de diversas formas, além de economizar muito espaço.
Pode ser utilizado como menu deslizante e também como chamada de notícias rolantes.
Muito fácil de customizar e personalizar, basta alterar código CSS.

<body>
<head>

<style type="text/css">
<!--
.minifonts {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000066}
.black {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000}
.bodyfonts {font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
.destaque {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #FF9900}
a:hover {text-decoration: underline}
.branco {font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; color: #FFFFFF}
-->
</style>


<script language="JavaScript1.2">
<!--
var largura=150
var altura=25
var bgcolor='white'
var fundo=''

var mensagens=new Array()
mensagens[0]="<center><font face='Arial' size=2><a href='banner.html'>FABIO POLETTO</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='paginadois.html'>MEMBRO SOARTES.</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='mailto:fabio_ptto@hotmail.com'>E-MAIL</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='modelosdemenus.html'>O MELHOR</a></font></center>"


if (mensagens.length>1)
i=2
else
i=0

function mover1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("mover1(tlayer)",3000)
setTimeout("mover2(document.principal.document.segundo)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("mover1(tlayer)",100)
}
else{
tlayer.top=altura
tlayer.document.write(mensagens[i])
tlayer.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("mover2(tlayer2)",3000)
setTimeout("mover1(document.principal.document.primeiro)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("mover2(tlayer2)",100)
}
else{
tlayer2.top=altura
tlayer2.document.write(mensagens[i])
tlayer2.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("mover3(tdiv)",3000)
setTimeout("mover4(segundo2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("mover3(tdiv)",100)
}
else{
tdiv.style.pixelTop=altura
tdiv.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("mover4(tdiv2)",3000)
setTimeout("mover3(primeiro2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("mover4(segundo2)",100)
}
else{
tdiv2.style.pixelTop=altura
tdiv2.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function iniciar(){
if (document.all){
mover3(primeiro2)
segundo2.style.top=altura
segundo2.style.visibility='visible'
}
else if (document.layers){
document.principal.visibility='show'
mover1(document.principal.document.primeiro)
document.principal.document.segundo.top=altura+5
document.principal.document.segundo.visibility='show'
}
}
//-->
</script>

<table width="150" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor}; background=&{fundo}; visibility=hide>
<layer id="primeiro" left=0 top=1 width=&{largura};>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[0])
</script>
</layer>
<layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
<!--
if (document.all){
document.writeln('<span id="principal2" style="position:relative;width:'+largura+';height:'+altura+';overflow:hiden;background-color:'+bgcolor+' ;background-image:url('+fundo+')">')
document.writeln('<div style="position:absolute;width:'+largura+';height:'+altura+';clip:rect(0 '+largura+' '+altura+' 0);left:0;top:0">')
document.writeln('<div id="primeiro2" style="position:absolute;width:'+largura+';left:0;top:1;">')
document.write(mensagens[0])
document.writeln('</div>')
document.writeln('<div id="segundo2" style="position:absolute;width:'+largura+';left:0;top:0;visibility:hidden">')
document.write(mensagens[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
iniciar()
//-->
</script>

</td>
</tr>
</table>

</body>
</html>

0 comentários: