Recientemente, quise implementar un efecto de noticias continuas. Verifiqué información en Internet y descubrí que existen dos métodos de implementación básicos:
1. Utilice etiquetas de marquesina. He reimpreso un artículo relativamente detallado sobre el uso de esta etiqueta. La ventaja de esta etiqueta es que es fácil de usar. La desventaja es que la gente ha dejado de usarla gradualmente. Incluso en IE8, XHTML4. .0 Loose.dtd está bien, pero eliminar Loose.dtd no.
2. Utilice el método div+javascript. La ventaja de este método es que es compatible con casi todos los navegadores y aún puede ejecutarse de manera estable dentro de un período de tiempo predecible. Y el uso de div permite que las páginas web utilicen recursos CSS existentes para lograr muchos efectos deslumbrantes. La desventaja es que requiere cierta experiencia en programación y paciencia.
El principio básico de usar javascript + div es el mismo. Utilice el atributo scrollTop y el atributo offsettheight para lograr el efecto de movimiento. Generalmente se utilizan dos divs, el contenido interno es el mismo y luego los dos divs se unen para formar un efecto de bucle continuo. A continuación se muestran dos códigos de muestra que encontré. El primero es exactamente el que usé y funciona. No probé el segundo. Estoy escribiendo esto para comparar. La segunda copia debería poder utilizarse porque la tomé del sitio web.
primer codigo
Copie el código de código de la siguiente manera:
<div id="capa1" estilo="overflow-y:hidden;width:120;">
<div id="capa2">
<%
ArrayList anunciarList = DBTools.getView("seleccione * del orden sys_announce por fecha de publicación DESC");
for (int i = 1; i < anunciarList.size() && i < 5; i++) {
Cadena anunciarArr[] = (Cadena[]) anunciarList.get(i);
Contenido de cadena = anunciarArr[1];
Fecha de cadena = anunciarArr[2].substring(announceArr[2].indexOf("-")+1, anunciarArr[2].indexOf(" "));
%>
<table cellspace="0" cellpadding="0">
<tr>
<td/>
</tr>
</tabla>
<table cellspace="0" cellpadding="0">
<tr>
<td valign="arriba">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="altura-línea: 20px;" mce_style="altura-línea: 20px;">
<%=contenido%> <%=fecha%>
</td>
<td></td>
</tr>
</tabla>
<%
}
%>
</div>
<div id="capa3"></div>
</div>
<mce:lenguaje de escritura="javascript"><!--
var LayerHeight = 100; // Definir la altura del área de desplazamiento.100
var iFrame = 1; // Definir los píxeles movidos por cuadro.
var iFrequency = 50; // Definir la frecuencia del cuadro.
var timer; // Definir controlador de tiempo.
if(document.getElementById("capa2").offsetHeight >= capaHeight)
document.getElementById("capa1").style.height = capaHeight;
demás
document.getElementById("capa1").style.height = document.getElementById("capa2").offsetHeight;
document.getElementById("capa3").innerHTML = document.getElementById("capa2").innerHTML;
// alerta(document.getElementById("capa2").innerHTML);
función mover(){
if(document.getElementById("capa1").scrollTop >= document.getElementById("capa2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
demás {
document.getElementById("capa1").scrollTop += iFrame;
}
}
temporizador = setInterval("move()",iFrequency);
document.getElementById("capa1").onmouseover=función() {clearInterval(temporizador);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
segundo código
Copie el código de código de la siguiente manera:
<lenguaje SCRIPT="JavaScript">
var strArray=nueva matriz();
strArray[1]=''
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Aviso del Sexto Congreso Nacional de Miembros y Reunión Académica Anual de la Sociedad de Recursos Naturales de China (Nº 2) (09.10 )</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td altura=6></td></tr></table>'
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Convocatoria de ponencias para seminarios sobre "Teoría, tecnología y métodos de visualización de información espacial adaptativa" (09.04)</a > </td></tr></table><ancho de tabla=43 borde=0 espacio de celdas=0 relleno de celdas=0><tr><td altura=6></td></tr></table>'
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Aviso de contratación para puestos de contabilidad del Instituto de Ciencias Geográficas y Recursos Naturales, Academia de Ciencias de China (09.03)< /a></td> </tr></table><table width=43 border=0 cellspaceing=0 cellpadding=0><tr><td altura=6></td></tr></table>'
strArray[0]=''
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Serie de conferencias del Foro sobre cuestiones del agua - Conferencia 7 en 2009 (Conferencia 90 en total) (09.01)</ a> </td></tr></table><ancho de tabla=43 borde=0 espacio entre celdas=0 relleno de celda=0><tr><td altura=6></td></tr></table>'
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Foro de Innovación Independiente de Tecnología de Información Geográfica de la Academia China de Ciencias y Conferencia de Tecnología SIG SuperMap (09.01)</a >< /td></tr></table><ancho de tabla=43 borde=0 espacio entre celdas=0 cellpadding=0><tr><td altura=6></td></tr></table>'
+'<ancho de tabla=136 borde=0 espacio entre celdas=0 relleno de celdas=0><tr><td ancho=16 alto=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18 .gif" ancho=12 alto=12 vspace=5></td><td ancho=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">El Laboratorio Estatal Clave de Recursos y Sistemas de Información Ambiental está contratando investigadores invitados en la dirección del "Método de los elementos finitos" en 2009 (08.07)</a></td></tr></table><table width=43 border=0 cellspaceing=0 cellpadding=0><tr><td altura=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[mostrarId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<guión>
temporizador var;
documento.write('<div id="icefable1">'
+'<ancho de tabla=130=0 espacio entre celdas=0 relleno de celdas=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>'
+'</tabla>'
+'</div>'
+'<div id="icefable2" style="posición:absoluta;visibilidad:oculta" mce_style="posición:absoluta;visibilidad:oculta"></div>');
/*
var marquesinasHeight=132;
var stopcroll=false;
icefable1.scrollTop=0;
*/
con(icefable1){
/*
estilo.ancho=0;
style.height=marquesinasHeight;
estilo.overflowX="visible";
style.overflowY="oculto";
noWrap=verdadero;
*/
onmouseover=función(){clearInterval(temporizador);};
onmouseout=function(){temporizador = setInterval("move()",100);};
}
/*
var preTop=0;
var actualTop=0;
var tiempo de parada=0;
*/
función init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
temporizador = setInterval("move()",100);
}
función mover(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
demás
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
función desplazarse hacia arriba(){
if(stopscroll==true) retorno;
actualTop+=4;
si(actualTop==132)
{
tiempo de parada+=4;
actualTop-=0;
}
demás {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>