Este artículo describe el método de JS para lograr un desplazamiento ininterrumpido del texto de una sola línea. Compártelo para su referencia. El análisis específico es el siguiente:
Hace unos días, escribí una sola línea de texto para desplazarse hacia arriba continuamente para un amigo. Ahora lo comparto con los Webers que necesito. Veamos primero el código HTML y CSS:
CSS:
Copie el código de la siguiente manera: .wrap {relleno: 10px; border: 1px #ccc solid; Ancho: 500px; margen: 20px Auto;}
.Roll-Wrap {altura: 130px; desbordamiento: Hidden;}
HTML:
Copie el código de la siguiente manera: <Div>
<div id = "roll-wrap">
<ul>
<li> JS Texto desplazándose 1 </li>
<li> JS Texto desplazándose 2 </li>
<li> JS Texto desplazándose 3 </li>
<li> JS Texto desplazándose 4 </li>
<li> JS Texto desplazándose 5 </li>
<li> JS Texto desplazándose 6 </li>
<li> JS Texto desplazándose hacia arriba 7 </li>
</ul>
</div>
</div>
El principio de este efecto de animación es desplazar primero el UL hacia arriba la altura de un LI, y después de desplazarse, el primer LI en UL se coloca al final de UL. En este momento, el segundo Li original se convierte en el primer LI en UL, y luego repite las acciones anteriores y repite el desplazamiento continuo.
Código JS (jQuery):
Copie el código de la siguiente manera: function scrollTxt () {
Var Controls = {},
valores = {},
T1 = 200, /*Tiempo para reproducir la animación* /
t2 = 2000, /*intervalo de tiempo de juego* /
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 ();
}
/*voluta*/
function play () {
controls.rollwrapul.animate ({"margin-top": "-"+valores.liheight}, t1, function () {
$ (this) .css ("margin-top", "0"). Children (). Eq (0) .AppendTo ($ (esto));
});
}
/*Desplazamiento automático*/
function autoplay () {
/ *Desplácese si la altura y la altura de todas las etiquetas LI son mayores que la altura de .Roll-Wrap */
if (value.liHeight*value.linums> value.ulheight) {
si = setInterval (function () {
jugar();
}, t2);
}
}
/*Descripción de las pausas cuando el mouse pasa por UL*/
function pauseplay () {
controls.rollwrapul.on ({
"Mouseenter": functer () {
ClearInterval (SI);
},
"MouseLeave": functer () {
autoplay ();
}
});
}
}
nuevo scrolltxt (). init ();
Espero que este artículo sea útil para la programación de JavaScript de todos.