Efeito de rolagem intermitente e sem costura (o efeito da gravação com GIF não é muito bom, se você estiver interessado, você pode reduzir o código), o conteúdo específico é o seguinte
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> rolagem sem costura </title> <style> *{margin: 0; padding: 0;} .xox {width: 500px; altura: 400px; 40px; relativa; largura: 500px; altura: 400px; estouro: hidden;} .item {altura: 40px; fundo: vermelho; cor: #fff; line-height: 40px; text-align: Center;} .Item: nth-child (2n) {000 000} </estilo> <script> Document.getElementById (json.id); } else {objscroll.scrolltop ++; }} else {var timer; objscroll.scrolltop ++; rollup ({on: true, id: 'block'}); scrollup ({id: 'block2', altura: 120}); } </script></head><body> <div> <div id="block"> <div>1 Seamless scroll</div> <div>2 Seamless scroll</div> <div>3 Seamless scroll</div> <div>4 Seamless scroll</div> <div>5 Seamless scroll</div> <div>6 Seamless scroll</div> <div>7 Seamless scroll</div> <div>8 Seamless scroll</div> <div>9 Seamless scroll</div> <div>10 Seamless scroll</div> <div>11 seamless scroll</div> <div>12 seamless scroll</div> <div>13 seamless scroll</div> <div>14 seamless scroll</div> <div>15 seamless scroll</div> </div> </div> <div> <div id="block2"> <div>1 intermittent rolagem </div> <div> 1 rolagem intermitente </div> <div> 2 rolagem intermitente </div> <div> 3 rolagem intermitente </div> <div> 4 scroll intermitente </div> <div> 5 scroll intermittent scroll </div> 6oll/scroll <//Div. <div> 9 rolagem intermitente </div> <div> 10 rolagem intermitente </div> <div> 11 rolagem intermitente </div> <div> 12 scroll intermitente </div> <div> 13 Divull scroll </div> <div> 14 scroll intermitente </> <div> <div> 15 scroll </div> </div> </body> </html>Observação:
1. O bloco de caixa deve estar transbordando e oculta o CSS: Overflow: Hidden
2. Existem duas funções: rolagem intermitente/rolagem sem costura
3. Primeiro, copie um pedaço exatamente do mesmo código e role perfeitamente: o cronômetro de execução continua aumentando o valor do Scrolltop. Quando o valor do ScrollTop for maior que a altura da caixa, defina o scrolltop como 0 e inicie novamente. A rolagem intermitente é adicionada nessa base, o Settimeout é executado de forma intermitente e a altura especificada para quando o ScrollTop chegar.
4. Pergunta: setInterval (function () {scrolling ()}, 30); No código, ele pode ser executado escrevendo dessa maneira, setInterval ('rolling ()', 30); Isso não vai funcionar. Existe alguma grande orientação do mestre? Qual é a diferença entre os dois? Qual é o mecanismo?
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.