Ao lidar com a rolagem contínua e intermitente de notícias em uma página, o método mais comum é copiar e anexar o conteúdo da área de rolagem e, em seguida, controlar e julgar o scrollTop do bloco de rolagem para obter o efeito de parada de rolagem.
Na verdade, em muitos casos é mais fácil obter uma rolagem contínua e intermitente nas operações do nó.
O código é o seguinte:
<linguagem script="javascript" type="text/javascript">
janela.onload=função(){
var o=document.getElementById('caixa');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///Método principal de rolagem
///Parâmetro:o objeto de bloco de rolagem
///Parâmetro: d A altura de cada scroll
///Parâmetro: c altura de rolagem atual
função scrollup(o,d,c){
se(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}outro{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//Resolva o problema de que espaços e retornos de carro serão usados como nós no Firefox
função getFirstChild(nó){
enquanto (node.nodeType!=1)
{
node=node.nextIrmão;
}
nó de retorno;
}
</script>
<ul id="caixa">
<li>· Xinhua Daily Telegraph: As taxas de direitos autorais de músicas são como "uma bola de cânhamo" </li>
<li>· Expresso Moderno: Os humanos podem se casar com robôs e ter filhos </li>?
<li>·Global: América, a falência de um clube bilionário</li>
<li>· Modern Express: Para silenciar Ni Zhen da mídia, ele queria vender as cartas de amor de Li Jiaxin</li>
<li>· Beijing Times: Foguete feito por estudantes da Universidade de Aeronáutica e Astronáutica de Pequim sobe ao céu</li>
</ul>
Efeito:
executar código
<style type="texto/css">
<!--
*{ margem:0px; preenchimento:0px;}
#box{largura:300px; altura:24px;overflow:oculto; tamanho da fonte:12px;
#box li{ estilo de lista: nenhum; altura da linha: 24px;}
-->
</estilo>
<linguagem script="javascript" type="text/javascript">
janela.onload=função(){
var o=document.getElementById('caixa');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
função scrollup(o,d,c){
se(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}outro{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
função getFirstChild(nó){
enquanto (node.nodeType!=1)
{
node=node.nextIrmão;
}
nó de retorno;
}
</script>
<ul id="caixa">
<li>· Xinhua Daily Telegraph: As taxas de direitos autorais de música são como "uma bola de cânhamo" </li>
<li>· Expresso Moderno: Os humanos podem se casar com robôs e ter filhos </li>?
<li>·Global: América, a falência de um clube bilionário</li>
<li>· Modern Express: Para silenciar Ni Zhen da mídia, ele queria vender as cartas de amor de Li Jiaxin</li>
<li>· Beijing Times: Foguete feito por estudantes da Universidade de Aeronáutica e Astronáutica de Pequim sobe ao céu</li>
</ul>