Récemment, j'ai voulu implémenter un effet d'actualité continue. J'ai vérifié certaines informations sur Internet et j'ai découvert qu'il existe deux méthodes d'implémentation de base :
1. Utilisez les balises Marquee. J'ai réimprimé un article relativement détaillé sur l'utilisation de cette balise. L'avantage de cette balise est qu'elle est facile à utiliser. L'inconvénient est que les gens ont progressivement arrêté de l'utiliser. Même dans IE8, XHTML4. .0 Loose.dtd est OK, mais la suppression de Loose.dtd ne l'est pas.
2. Utilisez la méthode div+javascript. L’avantage de cette méthode est qu’elle est compatible avec presque tous les navigateurs et peut toujours fonctionner de manière stable sur une période de temps prévisible. Et l'utilisation de div permet aux pages Web d'utiliser les ressources CSS existantes pour obtenir de nombreux effets éblouissants. L’inconvénient est que cela nécessite une certaine expérience en programmation et de la patience.
Le principe de base de l'utilisation de javascript+div est le même. Utilisez l'attribut scrollTop et l'attribut offsetteight pour obtenir l'effet de déplacement. Généralement, deux divs sont utilisés, le contenu à l'intérieur est le même, puis les deux divs sont épissés pour former un effet de boucle continue. Vous trouverez ci-dessous deux exemples de codes que j'ai trouvés. Le premier est exactement ce que j'ai utilisé et il fonctionne. Je n'ai pas testé le deuxième. J'écris ceci à titre de comparaison. La deuxième copie devrait être utilisable car je l'ai prise sur le site Web.
premier code
Copiez le code comme suit :
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="couche2">
<%
ArrayListnounceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
pour (int i = 1; i <nounceList.size() && i < 5; i++) {
String AnnonceArr[] = (String[]) AnnonceList.get(i);
Contenu de la chaîne = annonceArr[1] ;
String date = annonceArr[2].substring(annonceArr[2].indexOf("-")+1, annonceArr[2].indexOf(" "));
%>
<table cellpacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</table>
<table cellpacing="0" cellpadding="0">
<tr>
<td valign="haut">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="hauteur de ligne : 20px;" mce_style="hauteur de ligne : 20px;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // Définit la hauteur de la zone de défilement.100
var iFrame = 1; // Définit les pixels déplacés par image.
var iFrequency = 50; // Définit la fréquence de trame.
var timer; // Définir le descripteur de temps.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
autre
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
// alerte(document.getElementById("layer2").innerHTML);
fonction déplacer(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
autre {
document.getElementById("layer1").scrollTop += iFrame;
}
}
timer = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
deuxième code
Copiez le code comme suit :
<Langage SCRIPT="JavaScript">
var strArray=nouveau tableau();
strArray[1]=''
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Avis du sixième congrès national des membres et réunion académique annuelle de la Société des ressources naturelles de Chine (n° 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Appel à communications pour le séminaire sur "La théorie, la technologie et les méthodes de visualisation adaptative de l'information spatiale" (09.04)</a > </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Avis de recrutement pour des postes comptables de l'Institut des sciences géographiques et des ressources naturelles, Académie chinoise des sciences (09.03)< /a></td> </tr></table><table width=43 border=0 Cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Série de conférences du Forum sur les questions d'eau - Conférence 7 en 2009 (90 conférences au total) (09.01)</ a> </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Forum indépendant sur l'innovation des technologies de l'information géographique de l'Académie chinoise des sciences et conférence sur la technologie SIG SuperMap (09.01)</a >< /td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" width=12 height=12 vspace=5></td><td width=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">Le Laboratoire clé d'État des systèmes d'information sur les ressources et l'environnement recrute des chercheurs invités dans le sens de la "Méthode des éléments finis" en 2009 (08.07)</a></td></tr></table><table width=43 border=0 Cellpacing=0 cellpadding=0><tr><td hauteur=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<SCRIPT>
minuterie variable ;
document.write('<div id="icefable1">'
+'<largeur de la table=130; border=0 cellpacing=0 cellpadding=0>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ tr>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ tr>'
+'</table>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var chapiteauxHauteur=132;
var arrête le défilement=false;
icefable1.scrollTop=0;
*/
avec(icefable1){
/*
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="caché";
noWrap=true ;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var courantTop=0;
var heure d'arrêt = 0 ;
*/
fonction init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
minuterie = setInterval("move()",100);
}
fonction déplacer(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
autre
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
fonction scrollUp(){
if(stopscroll==true) return;
courantTop+=4 ;
si (actuelTop == 132)
{
heure d'arrêt+=4 ;
courantTop-=0 ;
}
autre {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
si(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>