Recentemente, eu queria implementar um efeito de notícias contínuas. Verifiquei algumas informações na Internet e descobri que existem dois métodos básicos de implementação:
1. Use tags Marquee. Reimprimi um artigo relativamente detalhado sobre o uso dessa tag. A vantagem dessa tag é que ela é fácil de usar. A desvantagem é que as pessoas pararam de usá-la gradualmente. .0 solto dtd está OK, mas remover loose.dtd não.
2. Use o método div+javascript. A vantagem deste método é que ele é compatível com quase todos os navegadores e ainda pode funcionar de forma estável dentro de um período de tempo previsível. E usar div permite que as páginas da web usem recursos CSS existentes para obter muitos efeitos deslumbrantes. A desvantagem é que requer certa experiência de programação e paciência.
O princípio básico de usar javascript + div é o mesmo. Use o atributo scrollTop e o atributo offsettheight para obter o efeito de movimento. Geralmente, dois divs são usados, o conteúdo interno é o mesmo e, em seguida, os dois divs são unidos para formar um efeito de loop contínuo. Abaixo estão dois códigos de exemplo que encontrei. O primeiro é exatamente o que usei e funciona. Não testei o segundo. Estou escrevendo isso para comparação. A segunda cópia deve ser utilizável porque a tirei do site.
primeiro código
Copie o código do código da seguinte forma:
<div id="layer1" style="overflow-y:hidden;largura:120;">
<div id="camada2">
<%
ArrayList anunciaList = DBTools.getView("selecione * da ordem sys_announce por pubdate DESC");
for (int i = 1; i < anunciaList.size() && i < 5; i++) {
String anunciaArr[] = (String[]) anunciaList.get(i);
String conteúdo = anunciarArr[1];
String data = anunciaArr[2].substring(announceArr[2].indexOf("-")+1, anunciaArr[2].indexOf(" "));
%>
<table cellpacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</tabela>
<table cellpacing="0" cellpadding="0">
<tr>
<td valign="topo">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="altura da linha: 20px;" mce_style="altura da linha: 20px;">
<%=conteúdo%> <%=data%>
</td>
<td></td>
</tr>
</tabela>
<%
}
%>
</div>
<div id="camada3"></div>
</div>
<mce:script linguagem="javascript"><!--
var layerHeight = 100; // Define a altura da área de rolagem.100;
var iFrame = 1; // Define os pixels movidos por quadro.
var iFrequency = 50; // Define a frequência do quadro.
var timer; // Define o identificador de tempo.
if(document.getElementById("camada2").offsetHeight >= camadaHeight)
document.getElementById("camada1").style.height = camadaHeight;
outro
document.getElementById("camada1").style.height = document.getElementById("camada2").offsetHeight;
document.getElementById("camada3").innerHTML = document.getElementById("camada2").innerHTML;
// alerta(document.getElementById("camada2").innerHTML);
função mover(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("camada1").scrollTop -= (document.getElementById("camada2").offsetHeight - iFrame);
}
outro {
document.getElementById("camada1").scrollTop += iFrame;
}
}
temporizador = setInterval("move()",iFrequency);
document.getElementById("camada1").onmouseover=function() {clearInterval(timer);}
document.getElementById("camada1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
segundo código
Copie o código do código da seguinte forma:
<linguagem SCRIPT="JavaScript">
var strArray=new Array();
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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">Aviso do Sexto Congresso Nacional de Membros e Reunião Acadêmica Anual da Sociedade de Recursos Naturais da China (No. 2) (09.10)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td altura=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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">"Chamada de seminário para artigos sobre "Teoria, tecnologia e métodos de visualização de informações espaciais adaptativas" (09.04)</a > </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td altura=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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">Aviso de recrutamento para cargos de contabilidade do Instituto de Ciências Geográficas e Recursos Naturais, Academia Chinesa de Ciências (09.03)< /a></td> </tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td altura=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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">Série de palestras do fórum sobre questões hídricas - Aula 7 em 2009 (Aula 90 no total) (09.01)</ a> </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td altura=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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009' Academia Chinesa de Ciências, Tecnologia da Informação Geográfica, Fórum de Inovação Independente e SuperMap GIS Technology Conference (09.01)</a >< /td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=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" largura=12 altura=12 vspace=5></td><td largura=120><a target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">O Laboratório Estadual de Recursos e Sistemas de Informação Ambiental está recrutando pesquisadores convidados na direção do "Método dos Elementos Finitos" em 2009 (08.07)</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<ROTO>
var temporizador;
document.write('<div id="icefable1">'
+'<largura da tabela=130;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>'
+'</tabela>'
+'</div>'
+'<div id="icefable2" style="posição:absolute;visibilidade:oculto" mce_style="posição:absoluto;visibilidade:oculto"></div>');
/*
var marqueesHeight=132;
var stopscroll=falso;
icefable1.scrollTop=0;
*/
com(icefável1){
/*
estilo.largura=0;
style.height=marqueesHeight;
style.overflowX="visível";
style.overflowY="oculto";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var préTop=0;
var atualTop=0;
var tempo de parada=0;
*/
função init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
temporizador = setInterval("mover()",100);
}
função mover(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
outro
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
função scrollUp(){
if(stopscroll==true) retornar;
atualTop+=4;
if(actualTop==132)
{
tempo de parada+=4;
atualTop-=0;
}
outro {
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>