Comment mettre en œuvre des effets de texte défilant conformes aux standards WEB

Auteur：Eve Cole Date de mise à jour：2009-05-31 00:37:26

Étant donné que la balise marquee est de moins en moins utilisée, la plupart des effets de défilement sont implémentés à l'aide de JavaScript. Pour ceux qui ne comprennent pas pourquoi ne pas simplement utiliser la balise marquee, vous pourriez aussi bien lire cet article en premier.

Utilisez javascript pour simuler l'approche du chapiteau.

Voici le contenu cité :

<!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">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Actualités chaudes webjx.com</title>
<style type="text/css">

</style>
</tête>

<corps>
<h4>Actualités en continu</h4>
<langage de 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>Utilisez "Dream Security" pour récupérer rapidement le mot de passe de votre compte</ un>" ;
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>Site Web officiel de la commande générale NetEase</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>Dernier téléchargement de fond d'écran</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>Dernier téléchargement d'écran de veille</a>";
var marqueeInterval=nouveau tableau();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
fonction 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>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
fonction startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
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);
}
autre {
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);
}
fonction scrollMarquee() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarq<div><font color=#999999 title="Première page"><font face="webdings">9</font></font>
<font color=#999999 title="Dix pages précédentes"><font face="webdings">7</font></font>
<font color=#999999 title="Page précédente"><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="page suivante"><font face="webdings">4</font></a>
<font color=#999999 title="Dix pages suivantes"><font face="webdings">8</font></font>
<a href="./142220269IF5J4C4E387110_3.html" title="Dernière page"><font face="webdings"> :</font></a>
</div></div>

<div class="art_detail_now">Vous lisez l'article :
<span>Comment mettre en œuvre des effets de texte défilant conformes aux standards WEB</span><br />
● Mots-clés :
<envergure>

<script language="javascript" src="/ad/adnav.js"></script></span><br />
Article précédent : <label id="PrevPage_9IF5J4C4E387110"></label><script langage="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
Article suivant : <label id="NextPage_9IF5J4C4E387110"></label><script langage="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>Articles connexes</span>

<ul>

<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">Étude préliminaire sur la technologie de construction de sites Web2.0 à grande échelle</a> 2007-10-16</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">Quatre méthodes de définition liées à la taille du texte dans la conception Web</a> 2007-10-14</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">Tous les contenus de la conception Web ne doivent pas nécessairement utiliser DIV comme "conteneur"</a> 2007-10-14</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">Plusieurs méthodes pour résoudre le problème selon lequel les versions inférieures à IE7 ne prennent pas en charge les pseudo-classes à état A</a> 2007-10-14</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">Les effets spéciaux du compte à rebours avant l'ouverture des Jeux Olympiques de Pékin 2008, une simple démonstration ! </a> 2007-10-14</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">Personnaliser le code CSS pour le soulignement des liens hypertextes des pages Web</a> 04/10/2007</li>
</ul>
</div>
</div>
<div classe="r">
<div class="nav">
<div class="nav_title">
<div id="n1">268 Base de connaissances pour les webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Design/Pages/">Page Web</a> </li>
<li><a href="http://www.cz268.com.cn/Design/Edit/">Programmation</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Seo/">Optimisation</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">Promotion</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/">Norme WEB</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">Site sympa</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Exp/">Expérience</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Free/">Ressources</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/Reading/">À lire absolument</a> </li>
<li><a href="http://www.cz268.com.cn/Server/">Serveur</a> </li>
<li><a href="http://www.cz268.com.cn/cms/">Création de sites Web CMS</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">Réseau de webmasters lié à l'industrie</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/article/p1/14.html">Industrie</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/15.html">Financement</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/16.html">Portail</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/17.html">Rechercher</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/19.html">Entreprises</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/18.html">Développement</a> </li></ul></div>
<div class="nav_title">
<div id="n3">Informations sur l'alliance du réseau des webmasters</div>
</div>
<div class="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Union/News/">Union</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Intro/">Introduction</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Comment/">Commentaires</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Skill/">Compétences</a> </li>
<li><a href="http://www.cz268.com.cn/Union/">Discussion syndicale</a> </li></ul></div>
<div class="nav_title">
<div id="n4">Outils communs du réseau des 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/">WHOIS</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/">VIANDE</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Key/">Mots clés</a></li></ul></div></div>
<div class="ad_300x250">
<script type="text/javascript">
</script>
<script type="texte/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="mba_title">『Articles populaires』
<span>268 Réseau de webmasters</span></div>

<ul>

<li><a title="Considérations sur l'installation et la configuration du serveur Web 64 bits" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">Considérations sur l'installation et la configuration du serveur Web 64 bits..</a >< /li>
<li><a title="Xu Jinglei : Webmasters, comprenez-vous le battage médiatique ?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">Xu Jinglei : Webmasters, comprenez-vous le battage médiatique ? ..</a></li>
<li><a title="Directives pour gagner de l'argent en postulant à Google Adsense" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">Directives pour gagner de l'argent en postulant à Google Adsense..</a ></li>
<li><a title="Le marketing des blogs signifie qu'il n'est pas facile de vous aimer" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">Le marketing des blogs signifie que ce n'est pas facile t'aimer..</a ></li>
<li><a title="L'impact des sites Web conformes à la mise en page DIV+CSS de la norme XHTML sur le référencement" href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">L'impact des sites Web conformes à la norme XHTML DIV+CSS layout SE..</a></li>
<li><a title="Comment rédiger des articles logiciels pour tromper le nombre de clics pour augmenter !" href="/Webbiz/Pormot/31429J1AC36GA779F380KF.html" rel="external">Comment rédiger des articles logiciels pour tromper le nombre de clics pour augmenter !..< /a></li>
<li><a title="Remarque : vous avez uniquement le droit d'utiliser le nom de domaine de Xinwang Internet !" href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">Remarque : vous avez uniquement le droit d'utiliser le nom de domaine de Xinwang Droit d'utilisation Internet..</a></li>
<li><a title="Le dépôt national est difficile, le bon sens de base concernant le transfert d'espace étranger" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">Le dépôt national est difficile, le bon sens de base concernant le transfert d'espace étranger espace..< /a></li>
<li><a title="Créez un site portail local avec des stratégies complètes et une super optimisation SEO pour vous offrir une analyse complète" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">Créez un site portail local avec des stratégies complètes et une super optimisation SEO .</a></li>
<li><a title="Dix questions et réponses sur des sujets classiques vous aideront à améliorer votre taux de transactions en ligne" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">Dix questions et réponses sur des sujets classiques vous aideront vous aider à améliorer votre transaction de vente en ligne..</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="frontière sideart">
<div class="border_title sideart_title">『<a
href="http://www.cz268.com.cn/cms/">École CMS pour les webmasters de base</a>』Réseau 268 pour les webmasters</div>

<ul>

<li><a title="Laissez Fengxun afficher les codes de toutes les polices système" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">Laissez Fengxun afficher les codes de toutes les polices système..</a ></li>
<li><a title="Ajoutez un texte ou des images emblématiques pour les actualités recommandées et les actualités d'actualité" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000"> Ajouter un texte d'identification ou </font>..</a></li> pour les actualités recommandées et les actualités brûlantes
<li><a title="Les images et les numéros peuvent être sélectionnés pour afficher automatiquement l'ordre de la liste 1, 2 et 3" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">Les images et les numéros peuvent être affiché automatiquement le travail de l'ordre de liste 1, 2, 3..</a></li>
<li><a title="Foosun 4.0 implémente la fonction Clickeye de NetEase" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0 implémente la fonction Clickeye de NetEase..</a></li>
<li><a title="Fengxun sp2 lance un outil de forum spécial" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">Fengxun sp2 lance un outil de forum spécial..</a>< /li>
<li><a title="Fengxun FS4.0 ajoute une fonction de prévention des liens hypertextes d'image" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">Fengxun FS4 0 Ajouter. fonction de protection des liens hypertexte d'image</font>..</a></li>
<li><a title="Comment créer deux colonnes de liste d'actualités avec Fengxun DIV+CSS" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">Fengxun DIV+CSS pour créer deux colonnes d'actualités Comment diviser une liste en colonnes..</a></li>
<li><a title="Fournir 6 ensembles de modèles de journaux des membres du système Fengxun 4.0" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">Fournir 6 ensembles de modèles de journaux des membres du système Fengxun 4.0..< /a></li>
<li><a title="Fengxun Picture-in-Picture implémente la méthode d'appel des annonces Google" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">Fengxun Picture-in-Picture implémente la méthode de appeler des annonces Google .</a></li>
<li><a title="Ajouter "Vous avez un nouveau message texte, veuillez vérifier" la fonction d'invite vocale pour le système d'adhésion" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">Ajouter " Vous avez de nouveaux SMS, veuillez les vérifier..</a></li>
</ul>
</div>

</div></div>
<DIV class="border links"><SPAN>Liens amicaux</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">Requêtes courantes IP180</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com" target="_blank">Réseau de didacticiels jc286</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn" target="_blank">Tribu d'optimisation SEO</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com" target="_blank">Association des normes Web</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn" target="_blank">Réseau de webmasters 268</a> < /td>

</tr>
</table></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">268 Page d'accueil du réseau des webmasters</a> | com.cn/Webbiz">Exploitation du site Web</a> | <a href="http://www.cz268.com.cn/News">Actualités de l'industrie</a> | <a href="http:// www.cz268.com.cn/Union">Informations syndicales</a> | <a href="http://www.cz268.com.cn/Design">Académie des webmasters</a> | <a href= " http://www.cz268.com.cn/Webmaster">Webmaster en ligne</a> | <a href="http://www.cz268.com.cn/tool">Outils pour les webmasters</a> > | <a href="http://www.cz268.com.cn/cms">Zone CMS</a> | <a href="http://www.cz268.com.cn/Server">District du serveur< /a>| <a href="http://www.cz268.com.cn/sitemap">Plan du site</a><br />
<un
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 Tous droits réservés 268 Réseau de webmasters <img
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">Dépôt ICP de Pékin</a> Propulsé par QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' language='JavaScript' charset='gb2312'></script><br />Les informations sur ce site proviennent à partir d'Internet_ Il est uniquement à titre de référence et ne peut pas être utilisé comme véritable base. S'il y a des problèmes de droits d'auteur liés à la réimpression ou à la citation d'articles sur ce site, veuillez nous contacter dès que possible</div>
<noscript><iframe src="*.html"></iframe></noscript>
</body></html>