como é feito esse script

[Radubrêdo 0]

Gostaria de saber quais os passos para elaborar esse tipo de animação que está visivel no site:

ucsal

 

A parte q me interessa é aquela da parte de destaques, onde os destaques aparecem...sobem...e desaparecem.

 

Grato.

[Teodorico 0]

Olá,

 

Este tipo de efeito você encontra em inúmeros sites de scripts!

 

Mas aí vai um exemplo bem simples para você.

 

Faça o seguinte: copie e cole o código a seguir no notepad, por exemplo, e salve o arquivo como nomedoarquivo.htm. Em seguida dê um clique nele e o verá funcionando.

 

<table width="148" border="0" cellspacing="0" cellpadding="2" bgcolor="#F7F7F7">  <tr>    <td><font face="Arial, Helvetica, sans-serif, Arial Black" size="2">Novidades:</font></td>  </tr></table>  <script language="JavaScript1.2">var largura=150var altura=120var bgcolor='white'var fundo='' var mensagens=new Array()mensagens[0]="<font face='Arial' size=2><a href='Coloque o endereço da página 1 aqui'>Coloque o texto do link 1 aqui</a></font></center>"mensagens[1]="<font face='Arial' size=2><a href='Coloque o endereço da página 2 aqui'>Coloque o texto do link 2 aqui</a></font></center>"mensagens[2]="<font face='Arial' size=2><a href='Coloque o endereço da página 3 aqui'>Coloque o texto do link 3 aqui</a></font></center>"mensagens[3]="<font face='Arial' size=2><a href='Coloque o endereço da página 4 aqui'>Coloque o texto do link 4 aqui</a></font></center>"mensagens[4]="<font face='Arial' size=2><a href='Coloque o endereço da página 5 aqui'>Coloque o texto do link 5 aqui</a></font></center>" if (mensagens.length>1)i=2elsei=0function mover1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("mover1(tlayer)",3000)setTimeout("mover2(document.principal.document.segundo)",3000)return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("mover1(tlayer)",100)}else{tlayer.top=alturatlayer.document.write(mensagens[i])tlayer.document.close()if (i==mensagens.length-1)i=0elsei++}}function mover2(whichlayer){tlayer2=eval(whichlayer)if (tlayer2.top>0&&tlayer2.top<=5){tlayer2.top=0setTimeout("mover2(tlayer2)",3000)setTimeout("mover1(document.principal.document.primeiro)",3000)return}if (tlayer2.top>=tlayer2.document.height*-1){tlayer2.top-=5setTimeout("mover2(tlayer2)",100)}else{tlayer2.top=alturatlayer2.document.write(mensagens[i])tlayer2.document.close()if (i==mensagens.length-1)i=0elsei++}}function mover3(whichdiv){tdiv=eval(whichdiv)if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){tdiv.style.pixelTop=0setTimeout("mover3(tdiv)",3000)setTimeout("mover4(segundo2)",3000)return}if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){tdiv.style.pixelTop-=5setTimeout("mover3(tdiv)",100)}else{tdiv.style.pixelTop=alturatdiv.innerHTML=mensagens[i]if (i==mensagens.length-1)i=0elsei++}}function mover4(whichdiv){tdiv2=eval(whichdiv)if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){tdiv2.style.pixelTop=0setTimeout("mover4(tdiv2)",3000)setTimeout("mover3(primeiro2)",3000)return}if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){tdiv2.style.pixelTop-=5setTimeout("mover4(segundo2)",100)}else{tdiv2.style.pixelTop=alturatdiv2.innerHTML=mensagens[i]if (i==mensagens.length-1)i=0elsei++}}function iniciar(){if (document.all){mover3(primeiro2)segundo2.style.top=alturasegundo2.style.visibility='visible'}else if (document.layers){document.principal.visibility='show'mover1(document.principal.document.primeiro)document.principal.document.segundo.top=altura+5document.principal.document.segundo.visibility='show'}}</script><table width="150" border="0" 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></table>

Espero ter ajudado.

[sitenovo 0]

Seguinte,foi dificil pegar ocodigo fonte, mas ta ai...<link href="ucsal.css" rel="stylesheet" type="text/css"> <style type="text/css"><!--body { background-image: url(images/fundo_2.gif); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}--></style><div id="placeholder" style="position:relative; width:230px; height:50px; left: 0px; top: 0px;"></div><div id="tempholder"></div><script language="JavaScript" src="js/dhtmllib.js"></script><script language="JavaScript" src="js/scroller.js"></script><script language="JavaScript">var myScroller1 = new Scroller(0, 0, 250, 80, 1, 3); //(xpos, ypos, width, height, border, padding)myScroller1.setColors("", "", ""); //(fgcolor, bgcolor, bdcolor)myScroller1.setFont("Verdana,Arial,Helvetica", 2);myScroller1.addItem("<table width='100%' border='0' cellspacing='2' cellpadding='2'><tr><td class='texto'><strong>Pós-Graduação<br></strong>Especialização em Educação a Distância - Pós-Graduação Lato Sensu...</td></tr><tr><td align='right'><a href='curs_distancia.asp' class='menulateral' target='principal'><font color='#9C1200'>Saiba Mais... </font></a></td></tr></table>");myScroller1.addItem("<table width='100%' border='0' cellspacing='2' cellpadding='2'><tr><td class='texto'><strong>PROCAD<br></strong>2º Seminário Infra-estrutura Organização Territorial e Desenvolvimento Local </td></tr><tr><td align='right'><a href='eventos_2infraestrutura.asp' class='menulateral' target='principal'><font color='#9C1200'>Saiba Mais... </font></a></td></tr></table>");myScroller1.addItem("<table width='100%' border='0' cellspacing='2' cellpadding='2'><tr><td class='texto'><strong>Veja as novidades <br> na utilização dos recursos de informática da UCSal...</strong></td></tr><tr><td align='right'><a href='inform_dicas.asp' class='menulateral' target='principal'><font color='#9C1200'>Saiba Mais... </font></a></td></tr></table>");myScroller1.addItem("<table width='100%' border='0' cellspacing='2' cellpadding='2'><tr><td class='texto'><strong>Aditamento do FIES 2003-2</strong><br>Prorrogado até <strong>03/10/2003</strong>.</td></tr><tr><td align='right'><a href='http://www.ucsal.br/ucsal_profin_fies_adita.asp' target='_top' class='menulateral'><font color='#9C1200'>Saiba Mais... </font></a></td>");// max 139 caracteres//SET SCROLLER PAUSEmyScroller1.setPause(3000); //set pause beteen msgs, in millisecondsfunction runmikescroll() { var layer; var mikex, mikey; // Locate placeholder layer so we can use it to position the scrollers. layer = getLayer("placeholder"); mikex = getPageLeft(layer); mikey = getPageTop(layer); // Create the first scroller and position it. myScroller1.create(); myScroller1.hide(); myScroller1.moveTo(mikex, mikey); myScroller1.setzIndex(100); myScroller1.show();}window.onload=runmikescroll</script>Ele está dentro de um iframe que por hora o site está em frame... puxa...mas o codigo é esse, divirta-se!!Veja que tem os arquivos em .js, dai, tendo o caminho citado ai, fica por sua conta digitar no campo de endereço p/ baixar os arquivos!!Mude a seugosto e pronto![]sRodney

[Radubrêdo 0]

Olá,Este tipo de efeito você encontra em inúmeros sites de scripts!Mas aí vai um exemplo bem simples para você.Faça o seguinte: copie e cole o código a seguir no notepad, por exemplo, e salve o arquivo como nomedoarquivo.htm. Em seguida dê um clique nele e o verá funcionando.

<table width="148" border="0" cellspacing="0" cellpadding="2" bgcolor="#F7F7F7">  <tr>    <td><font face="Arial, Helvetica, sans-serif, Arial Black" size="2">Novidades:</font></td>  </tr></table>  <script language="JavaScript1.2">var largura=150var altura=120var bgcolor='white'var fundo='' var mensagens=new Array()mensagens[0]="<font face='Arial' size=2><a href='Coloque o endereço da página 1 aqui'>Coloque o texto do link 1 aqui</a></font></center>"mensagens[1]="<font face='Arial' size=2><a href='Coloque o endereço da página 2 aqui'>Coloque o texto do link 2 aqui</a></font></center>"mensagens[2]="<font face='Arial' size=2><a href='Coloque o endereço da página 3 aqui'>Coloque o texto do link 3 aqui</a></font></center>"mensagens[3]="<font face='Arial' size=2><a href='Coloque o endereço da página 4 aqui'>Coloque o texto do link 4 aqui</a></font></center>"mensagens[4]="<font face='Arial' size=2><a href='Coloque o endereço da página 5 aqui'>Coloque o texto do link 5 aqui</a></font></center>" if (mensagens.length>1)i=2elsei=0function mover1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("mover1(tlayer)",3000)setTimeout("mover2(document.principal.document.segundo)",3000)return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("mover1(tlayer)",100)}else{tlayer.top=alturatlayer.document.write(mensagens[i])tlayer.document.close()if (i==mensagens.length-1)i=0elsei++}}function mover2(whichlayer){tlayer2=eval(whichlayer)if (tlayer2.top>0&&tlayer2.top<=5){tlayer2.top=0setTimeout("mover2(tlayer2)",3000)setTimeout("mover1(document.principal.document.primeiro)",3000)return}if (tlayer2.top>=tlayer2.document.height*-1){tlayer2.top-=5setTimeout("mover2(tlayer2)",100)}else{tlayer2.top=alturatlayer2.document.write(mensagens[i])tlayer2.document.close()if (i==mensagens.length-1)i=0elsei++}}function mover3(whichdiv){tdiv=eval(whichdiv)if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){tdiv.style.pixelTop=0setTimeout("mover3(tdiv)",3000)setTimeout("mover4(segundo2)",3000)return}if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){tdiv.style.pixelTop-=5setTimeout("mover3(tdiv)",100)}else{tdiv.style.pixelTop=alturatdiv.innerHTML=mensagens[i]if (i==mensagens.length-1)i=0elsei++}}function mover4(whichdiv){tdiv2=eval(whichdiv)if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){tdiv2.style.pixelTop=0setTimeout("mover4(tdiv2)",3000)setTimeout("mover3(primeiro2)",3000)return}if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){tdiv2.style.pixelTop-=5setTimeout("mover4(segundo2)",100)}else{tdiv2.style.pixelTop=alturatdiv2.innerHTML=mensagens[i]if (i==mensagens.length-1)i=0elsei++}}function iniciar(){if (document.all){mover3(primeiro2)segundo2.style.top=alturasegundo2.style.visibility='visible'}else if (document.layers){document.principal.visibility='show'mover1(document.principal.document.primeiro)document.principal.document.segundo.top=altura+5document.principal.document.segundo.visibility='show'}}</script><table width="150" border="0" 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></table>

Espero ter ajudado.

Valeu mesmo cara!Só uma pergunta: esse script dfunciona em todos navegadores?