Cómo implementar efectos de texto con desplazamiento que cumplan con los estándares WEB

Autor：Eve Cole Fecha de actualización：2009-05-31 00:37:26

Dado que la etiqueta de marquesina se usa cada vez menos, la mayoría de los efectos de desplazamiento se implementan usando JavaScript. Para aquellos que no entienden por qué no usar simplemente la etiqueta de marquesina, también pueden leer este artículo primero.

Utilice javascript para simular el acercamiento de la marquesina.

El siguiente es el contenido citado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<title>Noticias de actualidad webjx.com</title>
<tipo de estilo="texto/css">

</estilo>
</cabeza>

<cuerpo>
<h4>Noticias continuas</h4>
<script idioma="JavaScript" tipo="texto/javascript">
var marqueeContent=nueva matriz();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>Utilice "Dream Security" para recuperar rápidamente la contraseña de su cuenta</ un>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>Sitio web oficial de pedidos generales de NetEase</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>Descarga del último fondo de pantalla</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>Última descarga del protector de pantalla</a>";
var marqueeInterval=nueva matriz();
var marquesinaId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
función initMarquee() {
var str=marquesinaContenido[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>');
marquesinaId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
función iniciarMarquee() {
var str=marqueeContent[marqueeId];
marquesinaId++;
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);
}
demás {
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);
}
función marquesina de desplazamiento() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarq<div><font color=#999999 title="Primera página"><font face="webdings">9</font></font>
<font color=#999999 title="Diez 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="página siguiente"><font face="webdings">4</font></a>
<font color=#999999 title="Próximas diez 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">Estás leyendo el artículo:
<span>Cómo implementar efectos de texto con desplazamiento que cumplan con los estándares WEB</span><br />
● Palabras clave:
<lapso>

<script language="javascript" src="/ad/adnav.js"></script></span><br />
Artículo 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=Página anterior"></script><br />
Artículo siguiente: <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>Artículos relacionados</span>

<ul>

<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">Un estudio preliminar sobre la tecnología de construcción de sitios Web2.0 a gran escala</a> 2007-10-16</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">Cuatro métodos de configuración relacionados con el tamaño del texto en diseño web</a> 2007-10-14</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">No todo el contenido en diseño web debe utilizar DIV como "contenedor"</a> 2007-10-14</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">Varios métodos para resolver el problema de que las versiones inferiores a IE7 no admiten pseudoclases de estado A</a> 2007-10-14</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">Los efectos especiales de la cuenta atrás para la inauguración de los Juegos Olímpicos de Beijing 2008, ¡una simple demostración! </a> 2007-10-14</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">Personalice el código CSS para el subrayado del hipervínculo de la página web</a> 2007-10-04</li>
</ul>
</div>
</div>
<div clase="r">
<div class="nav">
<div class="nav_title">
<div id="n1">268 Base de conocimientos para webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Design/Pages/">Página web</a> </li>
<li><a href="http://www.cz268.com.cn/Design/Edit/">Programación</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Seo/">Optimización</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">Promoción</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/">Estándar WEB</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">Sitio interesante</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Exp/">Experiencia</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/">Debe leer</a> </li>
<li><a href="http://www.cz268.com.cn/Server/">Servidor</a> </li>
<li><a href="http://www.cz268.com.cn/cms/">Creación de sitios web CMS</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">Red para webmasters relacionada con la industria</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/article/p1/14.html">Industria</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/15.html">Financiación</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">Buscar</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/19.html">Negocios</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/18.html">Desarrollo</a> </li></ul></div>
<div class="nav_title">
<div id="n3">Información de la alianza de la red para webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Union/News/">Unión</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Intro/">Introducción</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Comment/">Comentarios</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Skill/">Habilidades</a> </li>
<li><a href="http://www.cz268.com.cn/Union/">Charla sindical</a> </li></ul></div>
<div class="nav_title">
<div id="n4">Herramientas comunes de la red 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/">QUIÉN ES</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/PR/">PR</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/">Palabras clave</a></li></ul></div></div>
<div class="ad_300x250">
<script tipo="texto/javascript">
</script>
<tipo de script="texto/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="mba_title">『Artículos populares』
<span>268 Red para webmasters</span></div>

<ul>

<li><a title="Consideraciones de instalación y configuración del servidor web de 64 bits" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">Consideraciones de instalación y configuración del servidor web de 64 bits..</a >< /li>
<li><a title="Xu Jinglei: Webmasters, ¿entienden las exageraciones?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">Xu Jinglei: Webmasters, ¿entienden las exageraciones? ..</a></li>
<li><a title="Pautas para ganar dinero solicitando Google Adsense" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">Pautas para ganar dinero solicitando Google Adsense..</a >>li>
<li><a title="El marketing de blogs significa que no es fácil amarte" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">El marketing de blogs significa que no es fácil amarte..</a></li>
<li><a title="El impacto de los sitios web que cumplen con el diseño DIV+CSS del estándar XHTML en SEO" href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">El impacto de los sitios web que cumplen con el estándar XHTML DIV+CSS diseño SE..</a></li>
<li><a title="¿Cómo escribimos artículos blandos para engañar y aumentar el número de clics?" href="/Webbiz/Pormot/31429J1AC36GA779F380KF.html" rel="external">¿Cómo escribimos artículos blandos para engañar? ¡el número de clics para aumentar!..< /a></li>
<li><a title="Nota: ¡Solo tienes derecho a utilizar el nombre de dominio de Xinwang Internet!" href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">Nota: Solo tienes derecho utilizar el nombre de dominio de Xinwang Internet Derecho de uso..</a></li>
<li><a title="La presentación nacional es difícil, el sentido común básico sobre la transferencia de espacio al extranjero" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">La presentación nacional es difícil, el sentido común básico sobre la transferencia al extranjero espacio..< /a></li>
<li><a title="Cree un sitio de portal local con estrategias integrales y súper optimización SEO para brindarle un análisis completo" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">Cree un sitio de portal local con estrategias integrales y súper optimización SEO.</a></li>
<li><a title="Diez preguntas y respuestas sobre temas clásicos lo ayudarán a mejorar su tasa de transacciones en línea" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">Diez preguntas y respuestas sobre temas clásicos lo ayudarán ayudarle a mejorar sus transacciones de ventas en línea.</a></li>
</ul>
</div>

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

<script tipo="texto/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/">Escuela de CMS para webmasters de base</a>』268 Red para webmasters</div>

<ul>

<li><a title="Deje que Fengxun muestre los códigos de todas las fuentes del sistema" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">Deje que Fengxun muestre los códigos de todas las fuentes del sistema..</a >>li>
<li><a title="Agregue texto icónico o imágenes para noticias recomendadas y noticias de actualidad" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000"> Agregue texto de identificación o </font>..</a></li> para noticias recomendadas y noticias de actualidad
<li><a title="Se pueden seleccionar imágenes y números para mostrar automáticamente el orden de lista 1, 2 y 3" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">Se pueden seleccionar imágenes y números se muestra automáticamente El trabajo del orden de lista 1, 2, 3...</a></li>
<li><a title="Foosun 4.0 implementa la función clickeye de NetEase" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0 implementa la función clickeye de NetEase.</a></li>
<li><a title="Fengxun sp2 lanza una herramienta de foro especial" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">Fengxun sp2 lanza una herramienta de foro especial..</a>< /li>
<li><a title="Fengxun FS4.0 agrega función de prevención de vínculos directos de imágenes" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">Fengxun FS4.0 Agregar. función de protección de vínculo directo de imagen</font>..</a></li>
<li><a title="Cómo hacer dos columnas de lista de noticias con Fengxun DIV+CSS" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">Fengxun DIV+CSS para hacer dos columnas de noticias Cómo dividir una lista en columnas...</a></li>
<li><a title="Proporcione 6 conjuntos de plantillas de registro de miembros del sistema Fengxun 4.0" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">Proporcione 6 conjuntos de plantillas de registro de miembros del sistema Fengxun 4.0.< /a></li>
<li><a title="Fengxun Picture-in-Picture implementa el método de llamar a anuncios de Google" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">Fengxun Picture-in-Picture implementa el método de llamar a anuncios de Google .</a></li>
<li><a title="Agregar "Tiene un nuevo mensaje de texto, preste atención para verificar" la función de mensaje de voz para el sistema de membresía" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">Agregar "Tienes nuevos mensajes de texto, por favor revísalos..</a></li>
</ul>
</div>

</div></div>
<DIV class="border links"><SPAN>Enlaces amigables</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 comunes de IP180</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com" target="_blank">Red de tutoriales jc286</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn" target="_blank">tribu de optimización SEO</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com" target="_blank">Asociación de Estándares Web</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn" target="_blank">268 Red para webmasters</a> < /td>

</tr>
</tabla></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">268 Página de inicio de la red para webmasters</a> | com.cn/Webbiz">Operación del sitio web</a> | <a href="http://www.cz268.com.cn/News">Noticias de la industria</a> | <a href="http:// www.cz268.com.cn/Union">Información sindical</a> | <a href="http://www.cz268.com.cn/Design">Academia para webmasters</a> | <a href= " http://www.cz268.com.cn/Webmaster">Webmaster en línea</a> | <a href="http://www.cz268.com.cn/tool">Herramientas para webmasters</a> > | <a href="http://www.cz268.com.cn/cms">Zona CMS</a> | <a href="http://www.cz268.com.cn/Server">Distrito del servidor< /a>| <a href="http://www.cz268.com.cn/sitemap">Mapa del sitio</a><br />
<un
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 Todos los derechos reservados 268 Red para webmasters <img
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">Presentación ICP de Beijing</a> Desarrollado por QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' language='JavaScript' charset='gb2312'></script><br />La información de este sitio proviene de Internet_ Es solo como referencia y no se puede utilizar como base verdadera. Si existen problemas de derechos de autor relacionados con la reimpresión o cita de artículos en este sitio, contáctenos lo antes posible</div>.
<noscript><iframe src="*.html"></iframe></noscript>
</cuerpo></html>