Como implementar efeitos de rolagem de texto em conformidade com os padrões da WEB

Autor：Eve Cole Data da Última Atualização：2009-05-31 00:37:26

Como a marquee tag é cada vez menos usada, a maioria dos efeitos de rolagem são implementados usando JavaScript. Para aqueles que não entendem por que não usar apenas a marquee tag, é melhor ler este artigo primeiro.

Use javascript para simular a abordagem do marquee.

A seguir está o conteúdo citado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Notícias quentes webjx.com</title>
<style type="texto/css">

</estilo>
</head>

<corpo>
<h4>Notícias atuais</h4>
<linguagem script="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>Use "Dream Security" para recuperar rapidamente a senha da sua conta</ uma>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>Site oficial de pedidos gerais da NetEase</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>Último download do papel de parede</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>Último download do protetor de tela</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
var str=marqueeContent[0];
document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]= setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
marqueId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(document.getElementById("marqueeBox").childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
document.getElementById("marqueeBox").appendChild(nextLine);
}
outro {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
document.getElementById("marqueeBox").scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarq<div><font color=#999999 title="Primeira página"><font face="webdings">9</font></font>
<font color=#999999 title="Dez páginas anteriores"><font face="webdings">7</font></font>
<font color=#999999 title="Página anterior"><font face="webdings">3</font></font>
<b>1</b>
<a href="./142220269IF5J4C4E387110_2.html">2</a>
<a href="./142220269IF5J4C4E387110_3.html">3</a>
<a href="./142220269IF5J4C4E387110_2.html" title="next page"><font face="webdings">4</font></a>
<font color=#999999 title="Próximas dez páginas"><font face="webdings">8</font></font>
<a href="./142220269IF5J4C4E387110_3.html" title="Última página"><font face="webdings">:</font></a>
</div></div>

<div class="art_detail_now">Você está lendo o artigo:
<span>Como implementar efeitos de rolagem de texto em conformidade com os padrões da WEB</span><br />
● Palavras-chave:
<span>

<script language="javascript" src="/ad/adnav.js"></script></span><br />
Artigo anterior: <label id="PrevPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
Próximo artigo: <label id="NextPage_9IF5J4C4E387110"></label><script language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=NextPage"></script></div>
<div class="art_detail_list">
<span>Artigos relacionados</span>

<ul>

<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">Um estudo preliminar sobre tecnologia de construção de sites Web2.0 em larga escala</a> 2007-10-16</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">Quatro métodos de configuração relacionados ao tamanho do texto em web design</a> 2007-10-14</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">Nem todo conteúdo em web design deve usar DIV como um "contêiner"</a> 2007-10-14</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">Vários métodos para resolver o problema de versões anteriores ao IE7 não suportarem pseudoclasses A-state</a> 2007-10-14</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">Os efeitos especiais da contagem regressiva para a abertura dos Jogos Olímpicos de Pequim 2008, uma demonstração simples! </a> 14/10/2007</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">Personalizar o código CSS para sublinhado de hiperlink de página da web</a> 2007-10-04</li>
</ul>
</div>
</div>
<div class="r">
<div class="nav">
<div class="nav_title">
<div id="n1">268 Base de conhecimento para webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Design/Pages/">Página da Web</a> </li>
<li><a href="http://www.cz268.com.cn/Design/Edit/">Programação</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Seo/">Otimização</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">Promoção</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Blog/">Blog</a> </li>
<li><a href="http://www.cz268.com.cn/Design/w3c/">Padrão WEB</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">Site legal</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Exp/">Experiência</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Free/">Recursos</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/Reading/">Leitura obrigatória</a> </li>
<li><a href="http://www.cz268.com.cn/Server/">Servidor</a> </li>
<li><a href="http://www.cz268.com.cn/cms/">Construção de site CMS</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">Rede para webmasters relacionada ao setor</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/article/p1/14.html">Indústria</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/15.html">Financiamento</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/16.html">Portal</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/17.html">Pesquisar</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/19.html">Negócios</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/18.html">Desenvolvimento</a> </li></ul></div>
<div class="nav_title">
<div id="n3">Informações sobre a aliança de rede para webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Union/News/">União</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Intro/">Introdução</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Comment/">Comentários</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Skill/">Habilidades</a> </li>
<li><a href="http://www.cz268.com.cn/Union/">Conversa sobre Sindicato</a> </li></ul></div>
<div class="nav_title">
<div id="n4">Ferramentas comuns da rede para webmasters</div></div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Tool/Alexa/">Alexa</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/IP/">IP</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Whois/">QUEM</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/PR/">RP</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Meta/">CARNE</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Key/">Palavras-chave</a></li></ul></div></div>
<div class="ad_300x250">
<script type="text/javascript">
</script>
<script type="texto/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="mba_title">『Artigos populares』
<span>268 Rede para webmasters</span></div>

<ul>

<li><a title="Considerações sobre instalação e configuração do servidor Web de 64 bits" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">Considerações sobre instalação e configuração do servidor Web de 64 bits.</a >< /li>
<li><a title="Xu Jinglei: Webmasters, vocês entendem o hype?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">Xu Jinglei: Webmasters, vocês entendem o hype? ..</a></li>
<li><a title="Diretrizes para ganhar dinheiro inscrevendo-se no Google Adsense" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">Diretrizes para ganhar dinheiro inscrevendo-se no Google Adsense.</a </li>
<li><a title="O marketing de blogs significa que não é fácil amar você" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">O marketing de blogs significa que não é fácil amar você..</a ></li>
<li><a title="O impacto dos sites que atendem ao layout DIV+CSS do padrão XHTML no SEO" href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">O impacto dos sites que atendem ao o layout DIV+CSS padrão XHTML SE..</a></li>
<li><a title="Como escrevemos artigos brandos para enganar o número de cliques deve aumentar!" o número de cliques aumentará!..</a></li>
<li><a title="Nota: você só tem o direito de usar o nome de domínio da Xinwang Internet!" href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">Nota: você só tem o direito usar o nome de domínio do Xinwang Internet Right to use..</a></li>
<li><a title="O arquivamento doméstico é difícil, o bom senso básico sobre a transferência de espaço estrangeiro" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">O arquivamento doméstico é difícil, o bom senso básico sobre a transferência de espaço estrangeiro espaço..< /a></li>
<li><a title="Construa um site de portal local com estratégias abrangentes e super otimização de SEO para fornecer uma análise abrangente" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">Crie um site de portal local com estratégias abrangentes e super otimização de SEO.</a></li>.
<li><a title="Dez perguntas e respostas sobre tópicos clássicos ajudarão você a melhorar sua taxa de transações on-line" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">Dez perguntas e respostas sobre tópicos clássicos ajudarão ajudá-lo a melhorar suas transações de vendas on-line.</a></li>
</ul>
</div>

<div class="ad_125x125">
<script type="text/javascript">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type="text/javascript">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="border sideart">
<div class="border_title sideart_title">『<a
href="http://www.cz268.com.cn/cms/">Escola de CMS para webmasters de base</a>』268 Webmaster Network</div>

<ul>

<li><a title="Deixe o Fengxun exibir os códigos de todas as fontes do sistema" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">Deixe o Fengxun exibir os códigos de todas as fontes do sistema..</a </li>
<li><a title="Adicione texto ou imagens icônicas para notícias recomendadas e notícias quentes" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000"> Adicione texto de identificação ou </font>..</a></li> para notícias recomendadas e notícias quentes
<li><a title="Imagens e números podem ser selecionados para exibir automaticamente a ordem da lista 1, 2 e 3" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">Imagens e números podem ser exibido automaticamente O trabalho da ordem da lista 1, 2, 3..</a></li>
<li><a title="Foosun 4.0 implementa a função NetEase clickeye" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0 implementa a função NetEase clickeye..</a></li>
<li><a title="Fengxun sp2 lança ferramenta especial de fórum" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">Fengxun sp2 lança ferramenta especial de fórum..</a>< /li>
<li><a title="Fengxun FS4.0 adiciona função de prevenção de hotlink de imagem" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">Fengxun FS4. função de proteção de hotlink de imagem</font>..</a></li>
<li><a title="Como fazer duas colunas de lista de notícias com Fengxun DIV+CSS" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">Fengxun DIV+CSS para fazer duas colunas de notícias Como dividir uma lista em colunas.</a></li>
<li><a title="Forneça 6 conjuntos de modelos de log de membros do sistema Fengxun 4.0" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">Forneça 6 conjuntos de modelos de log de membros do sistema Fengxun 4.0.< /a></li>
<li><a title="Fengxun Picture-in-Picture implementa o método de chamada de anúncios do Google" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">Fengxun Picture-in-Picture implementa o método de chamando anúncios do Google.</a></li>
<li><a title="Adicionar "Você tem uma nova mensagem de texto, preste atenção para verificar" função de prompt de voz para o sistema de associação" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">Adicionar "Você tem novas mensagens de texto, verifique-as.</a></li>
</ul>
</div>

</div></div>
<DIV class="border links"><SPAN>Links amigáveis</SPAN>
<DIV class="border_content links_content"> <table width="100%" border="0" cellpacing="1" cellpadding="3">
<tr>
<td width="10%" align="center" valign="meddle"><a href="http://www.qkeer.com" target="_blank">QKeer.com</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.ip180.com" target="_blank">Consultas comuns do IP180</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com" target="_blank">Rede de tutoriais jc286</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn" target="_blank">tribo de otimização de SEO</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com" target="_blank">Associação de Padrões da Web</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn" target="_blank">268 Rede para webmasters</a> < /td>

</tr>
</tabela></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">Página inicial da rede para webmasters 268</a> <a href="http://www.cz268. com.cn/Webbiz">Operação do site</a> | <a href="http://www.cz268.com.cn/News">Notícias do setor</a> | <a href="http:// www.cz268.com.cn/Union">Informações Sindicais</a> | <a href="http://www.cz268.com.cn/Design">Academia de Webmasters</a> | <a href= " http://www.cz268.com.cn/Webmaster">Webmaster Online</a> | <a href="http://www.cz268.com.cn/tool">Ferramentas para webmasters</a> > | <a href="http://www.cz268.com.cn/cms">Zona CMS</a> | <a href="http://www.cz268.com.cn/Server">Distrito de Servidor< /a>| <a href="http://www.cz268.com.cn/sitemap">Mapa do site</a><br />
<um
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 Todos os direitos reservados 268 Webmaster Network <img
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">Arquivo ICP de Pequim</a> Desenvolvido por QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' language='JavaScript' charset='gb2312'></script><br />As informações deste site vêm da Internet_ É apenas para referência e não pode ser usado como base verdadeira. Se houver questões de direitos autorais envolvidas na reimpressão ou citação de artigos neste site, entre em contato conosco o mais rápido possível</div>.
<noscript><iframe src="*.html"></iframe></noscript>
</body></html>