Exemplo de implementação de animação de rolagem contínua premiada em terminal móvel HTML5

Este artigo apresenta o exemplo de implementação da premiada animação de rolagem contínua no terminal móvel HTML5 e o compartilha com todos.

análise de necessidades

Haha, fica muito claro imediatamente após enviar a imagem dinâmica.

Está rolando, rolando, então qual é o método para fazer isso? Vamos resumir:

Na verdade, é muito simples. O <div> mais externo é usado como uma janela fixa, o <ul> interno controla o movimento e o <li> interno é usado para exibir animações.

 <div class=roll id=roll> <ul> <li>A primeira estrutura</li> <li>A segunda estrutura</li> <li>A terceira estrutura</li> <li>A quarta estrutura</ li> <li>A quinta estrutura</li> <li>A sexta estrutura</li> <li>A sétima estrutura</li> <li>A oitava estrutura</li> </ul></div>

Primeiro implemente o estilo CSS básico

 *{margem:0; preenchimento:0;}.roll{ margem: 100px automático; largura: 200px; altura: 40px; borda oculta: 1px água-marinha sólida;}.roll ul{ estilo de lista: nenhum;}. rolar li{altura da linha:20px;tamanho da fonte:14px;

Você pode dar uma olhada no estilo geral:

método animar()

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

parâmetro:

estilos: parâmetro obrigatório, estilo CSS que precisa ser animado (use nomenclatura camel case)

speed: Especifica a velocidade da animação

@número:1000(ms)

@string:lento,normal,rápido

easing: velocidade da animação (swing, linear)

callback: função de retorno de chamada após a execução da função

 $(document).ready(function(){ setInterval(function(){ // Adicione um cronômetro para converter a cada 1,5s $(#roll).find(ul:first).animate({ marginTop:-40px // O distância de cada movimento},500,function(){ //O tempo do movimento da animação//$(this) refere-se ao objeto ul, //Depois que ul for redefinido, insira o primeiro e o segundo elementos //na posição do último elemento de ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(este).find(li:primeiro).appendTo(este } },1500) });

Dê uma olhada no efeito:

Através de quadros-chave em css3, você pode obter o efeito de pular etapas. Vamos dar uma breve olhada na ideia primeiro.

1. Se for um prêmio codificado, você precisará copiar o da frente para trás. Se for rolado um por um, copie o primeiro. Se for rolado em dois, copie o primeiro e o segundo. .individual.

 <div class=roll id=roll> <ul> <li>A primeira estrutura</li> <li>A segunda estrutura</li> <li>A terceira estrutura</li> <li>A quarta estrutura</ li> <li>A quinta estrutura</li> <li>A sexta estrutura</li> <li>A sétima estrutura</li> <li>A oitava estrutura</li> <li>Primeira estrutura</li > <li>Segunda estrutura</li> </ul></div>

2. Em seguida, calcule quantas vezes ele precisa ser rolado e quantos segundos por vez. O exemplo são dois scrolls, que levam 5s, então o tempo de animação do CSS3 é de 5s. Então, em quantas partes o @keyframe precisa ser dividido? Por ser uma pausa, cada pergaminho requer duas cópias, e a última tem que pular para que haja apenas uma cópia, então são necessárias 5 * 2 - 1 = 9 cópias. Você saberá olhando o código:

 /*Nenhum processamento de compatibilidade é feito aqui*/.roll ul{ estilo de lista: nenhum; ani 5s linear infinito /*Animação ani, 5s, reproduzida em velocidade constante em um loop*/}@keyframes ani{ 0 %{ margem superior: 0; } 12,5%{ margem superior: 0; } 25%{ margem superior: -40px; } 50%{ margem superior: -80px } 62,5%{ margem superior: -80px; } 75%{ margem superior: -120px; top: -160px; /*O último é um que pode interromper a animação*/ }}

Se o número for incerto, você precisará calculá-lo dinamicamente e usar js para adicionar @keyframes dinamicamente. Nesse momento, contanto que você possa calcular o intervalo e a distância do movimento, tudo bem.

1. Primeiro obtenha o comprimento de <li>

2. Em seguida, calcule a porcentagem do intervalo. Como há uma pausa, lembre-se de usar o número de segundos × 2.

3. Em seguida, use uma string para soletrar @keyframes, 0~length, incluindo comprimento, porque há mais um, números pares e ímpares são separados.

4. Clone a primeira e a segunda palavras em <ul> até o final de <ul>

5. Crie uma tag <style> e adicione-a a <head>

6. Adicione atributos de animação a <ul>

Sem mais delongas, vamos falar sobre o código:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Obter o objeto ul length = $(#roll li).length, //Obter o comprimento da matriz li per = 100 / (length / 2 * 2 ) ; / /Calcular a porcentagem do intervalo intermediário//Splice string var keyframes = `/ @keyframes ani{` for(var i = 0; i<=length; i++){ keyframes+=`${i * por}%{ margem superior: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px }`; quadros-chave+='}'; li:first), //Obtém o primeiro elemento liSec = liFirst.next(); //Obter o segundo elemento ulObj.append(liFirst.clone()).append(liSec.clone()); //Inserir os dois elementos em ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Cria uma tag de estilo para inserir quadros-chave no cabeçalho ulObj.css(animation,ani 5s linear infinite); //Adiciona animação css3 a ul} addKeyFrame();

Zepto no lado móvel não possui uma função de animação. Se você não usa atributos CSS3, como pode escrevê-lo em JS?

 var timer,top;função roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next();ulObj.append(liFirst.clone()).append(liSec.clone()); //Adicione o primeiro e o segundo à tag <ul> clearInterval(timer); timer = setInterval(function(){ //Defina o temporizador var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Obter a altura atual, mova para cima -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //Se chegar ao fim, chegará rapidamente a zero top = 0; {-webkit-transição:none,transição:none,margin-top:top}); setTimeout(function(){ //Adicione aqui um delayer, que também deve ser colocado no final da fila de execução, para evitar a fusão das duas animações top -= ulObj.css({-webkit-transition:all 1s,transition:all; 1s,margem superior :top}); },0) } },2000);}roll();

Se houver outros métodos, irei atualizá-los de vez em quando na próxima vez. Mas para dispositivos móveis, isso deve ser suficiente.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.