Ejemplo de implementación de animación de desplazamiento continuo premiado en terminal móvil HTML5

Este artículo presenta el ejemplo de implementación de la galardonada animación de desplazamiento continuo en el terminal móvil Html5 y lo comparte con todos. Los detalles son los siguientes:

análisis de necesidades

Jaja, queda muy claro inmediatamente después de subir la imagen dinámica.

Está rodando, rodando, entonces, ¿cuál es el método para hacer esto? Resumamos:

En realidad, es muy simple. El <div> más externo se usa como una ventana fija, el <ul> interno controla el movimiento y el <li> interno muestra animaciones.

 <div class=roll id=roll> <ul> <li>La primera estructura</li> <li>La segunda estructura</li> <li>La tercera estructura</li> <li>La cuarta estructura</ li> <li>La quinta estructura</li> <li>La sexta estructura</li> <li>La séptima estructura</li> <li>La octava estructura</li> </ul></div>

Primero implemente el estilo CSS básico.

 *{ margen:0; relleno:0;}.roll{ margen: 100px auto; ancho: 200px; alto: 40px; desbordamiento: oculto; borde: 1px aguamarina sólida;}.roll ul{ estilo de lista: ninguno;}. rodar li{ altura de línea: 20 px; tamaño de fuente: 14 px; alineación de texto: centro;}

Puedes echar un vistazo al estilo general:

método animar()

$(selector).animate(styles,speed,easing,callback)

parámetro:

estilos: parámetro requerido, estilo css que debe animarse (use nombres en mayúsculas y minúsculas)

velocidad: Especifica la velocidad de la animación.

@número:1000(ms)

@string: lento, normal, rápido

flexibilización: velocidad de animación (swing, lineal)

devolución de llamada: función de devolución de llamada después de ejecutar la función

 $(document).ready(function(){ setInterval(function(){ // Agrega un temporizador para convertir cada 1,5 s $(#roll).find(ul:first).animate({ marginTop:-40px // El distancia de cada movimiento},500,function(){ //El tiempo del movimiento de la animación//$(this) se refiere al objeto ul, //Después de restablecer ul, inserte el primer y segundo elemento //en la posición del último elemento de ul $(this).css({marginTop:0px}).find(li:first).appendTo(this); $(esto).find(li:first).appendTo(esto });

Mire el efecto:

A través de fotogramas clave en css3, puede obtener el efecto de saltar pasos. Primero echemos un breve vistazo a la idea.

1. Si es un premio codificado, entonces debe copiar el anverso al reverso. Si se lanza uno por uno, copie el primero. Si se lanza de dos en dos, copie el primero y el segundo. .

 <div class=roll id=roll> <ul> <li>La primera estructura</li> <li>La segunda estructura</li> <li>La tercera estructura</li> <li>La cuarta estructura</ li> <li>La quinta estructura</li> <li>La sexta estructura</li> <li>La séptima estructura</li> <li>La octava estructura</li> <li>Primera estructura</li > <li>Segunda estructura</li> </ul></div>

2. Luego calcule cuántas veces es necesario desplazarse y cuántos segundos a la vez. El ejemplo son dos desplazamientos, que tardan 5 segundos, por lo que el tiempo de animación de CSS3 es 5 segundos. Entonces, ¿en cuántas partes se debe dividir @keyframe? Debido a que es una pausa, cada desplazamiento requiere dos copias, y la última tiene que saltar por lo que solo hay una copia, por lo que se necesitan 5 * 2 - 1 = 9 copias. Lo sabrás mirando el código:

 /*Aquí no se realiza ningún procesamiento de compatibilidad*/.roll ul{ list-style: none; animación: ani 5s linear infinito /*Animación ani, 5s, reproducida a una velocidad constante en un bucle*/}@keyframes ani{ 0 %{ margen superior: 0; } 12,5%{ margen superior: 0; } 25%{ margen superior: -40px } 37,5%{ margen superior: -40px; } 50%{ margen-superior: -80px; } 62,5%{ margen-superior: -80px; } 75%{ margen-superior: -120px; top: -160px; /*El último es uno, que puede interrumpir la animación*/ }}

Si el número es incierto, entonces debe calcularlo dinámicamente y usar js para agregar @keyframes dinámicamente. En ese momento, siempre que pueda calcular el intervalo y la distancia de movimiento, estará bien.

1. Primero obtenga la longitud de <li>

2. Luego calcule el porcentaje del intervalo. Debido a que hay una pausa, recuerde usar la cantidad de segundos × 2.

3. Luego use una cadena para deletrear @keyframes, 0 ~ longitud, incluida la longitud, porque hay uno más, los números pares y los impares están separados.

4. Clona la primera y segunda palabra en <ul> hasta el final de <ul>

5. Cree una etiqueta <style> y agréguela a <head>

6. Agregue atributos de animación a <ul>

Sin más, hablemos del código:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Obtiene la longitud del objeto ul = $(#roll li).length, //Obtiene la longitud de la matriz li per = 100 / (longitud / 2 * 2 ) ; //Calcular el porcentaje de intervalos intermedios//Concatenar cadenas var keyframes = `/ @keyframes ani{` for(var i = 0; i<=length; i++){ keyframes+=`${i * por}%{ margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px }` } fotogramas clave+='}'; li:first), //Obtiene el primer elemento liSec = liFirst.next(); //Obtener el segundo elemento ulObj.append(liFirst.clone()).append(liSec.clone()); //Insertar los dos elementos en ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Crea una etiqueta de estilo para insertar fotogramas clave en el encabezado ulObj.css(animation,ani 5s linear infinite); //Agregar animación css3 a ul} addKeyFrame();

Zepto en el lado móvil no tiene una función de animación. Si no usa atributos CSS3, ¿cómo puede escribirlo en JS?

 var timer,top;function roll(){ var ulObj = $(#roll).find(ul), longitud = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //Agrega el primero y el segundo a la etiqueta <ul> clearInterval(timer); timer = setInterval(function(){ //Establece el temporizador var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Obtiene la altura actual Si no está al final, sube top -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ // Si llega al final, rápidamente llegará a cero top = 0; {-webkit- transición: ninguna, transición: ninguna, margen superior: superior}); //Agregue un retardador aquí, y debe ejecutarse al final de la cola, para evitar que las dos animaciones se fusionen top -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s, margen superior :arriba}); },0) } },2000);}roll();

Si hay otra forma, la actualizaré de vez en cuando la próxima vez. Pero para dispositivos móviles, estos deberían ser suficientes.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.