Este artigo descreve o método do JS para obter rolagem ininterrupta do texto de linha única. Compartilhe para sua referência. A análise específica é a seguinte:
Alguns dias atrás, escrevi uma única linha de texto para rolar para cima continuamente para um amigo. Agora eu compartilho com os Webers de que preciso. Vejamos o código HTML e CSS primeiro:
CSS:
Copie o código da seguinte forma: .WRAP {preenchimento: 10px; borda: 1px #CCC Solid; Largura: 500px; margem: 20px automático;}
.Roll-wrap {Hight: 130px; Overflow: Hidden;}
Html:
Copie o código da seguinte forma: <div>
<div id = "roll-wrap">
<ul>
<li> JS Texto rolando 1 </li>
<li> JS Texto rolando 2 </li>
<li> JS Texto rolando 3 </li>
<li> JS Texto rolando 4 </li>
<li> JS Texto rolando 5 </li>
<li> JS Texto rolando 6 </li>
<li> JS Texto rolando para cima 7 </li>
</ul>
</div>
</div>
O princípio desse efeito de animação é primeiro rolar o UL para cima a altura de um LI e, após a rolagem, o primeiro li em UL é colocado no final de Ul. Neste momento, o segundo LI original se torna o primeiro LI em UL e, em seguida, repita as ações acima e repita a rolagem contínua.
Código JS (jQuery):
Copie o código da seguinte forma: função scrolltxt () {
var controles = {},
valores = {},
T1 = 200, /*Hora de reproduzir a animação* /
T2 = 2000, /*intervalo de tempo de reprodução* /
si;
controls.rollwrap = $ ("#roll-wrap");
controls.rollwrapul = controls.rollwrap.children ();
controls.rollWRAPLIS = controls.rollwrapul.children ();
valores.linums = controls.rollWraPlis.Length;
valores.liHeight = controls.rollWraPlis.eq (0) .Height ();
valores.ulHeight = controls.rollWrap.Height ();
this.init = function () {
AutoPlay ();
pauseplay ();
}
/*roll*/
function play () {
controls.rollwrapul.animate ({"margin-top": "-"+valores.liHeight}, t1, function () {
$ (this) .css ("margin-top", "0"). Children (). Eq (0) .AppendTo ($ (this));
});
}
/*Rolagem automática*/
function AutoPlay () {
/ *Role se a altura e a altura de todas as tags Li forem maiores que a altura do .Roll-Wrap */
if (valores.liHeight*valores.linums> valores.ulHeight) {
si = setInterval (function () {
jogar();
}, t2);
}
}
/*A rolagem para uma pausa quando o mouse passa por ul*/
função pauseplay () {
Controls.rollwrapul.on ({
"MouseEnter": function () {
ClearInterval (SI);
},
"mouseleave": function () {
AutoPlay ();
}
});
}
}
new scrollltxt (). init ();
Espero que este artigo seja útil para a programação JavaScript de todos.