Este artigo descreve o método de implementação do efeito de rolo cronometrado da imagem JS. Compartilhe -o para sua referência, como segue:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-equiv = "x-ua-a--- efeito </title> <style type = "text/css"> .father {position: relativo; estouro: oculto; Altura: 100px; Largura: 300px; } .Box {float: esquerda; tamanho de fonte: 12px; Largura: 80px; Altura: 120px; estouro: oculto; Posição: Absoluto; } </style> <script linguage = "javascript" type = "text/javascript"> var t; window.onload = function () {var o = document.getElementById ('box'); t = window.setInterval(function(){ scrollup(o, 24, 0); }, 3000) } ///Scroll main method/// Parameters: o Scroll block object/// Parameters: d Height of each scroll/// Parameters: c Current scrolled height function scrollup(o, d, c){ if (d == (c - 78 )) { var t = getFirstChild (O.FirstChild) .CloneNode (true); O.RemoveChild (GetFirstChild (O.FirstChild)); O.AppendChild (T); t.style.margintop = "0px"; } else {c += 1; getFirstChild (O.FirstChild) .style.Margintop = -C + "px"; window.setTimeout (function () {scrollup (o, d, c)}, 15); }} // Resolva o problema de que os espaços são retornados como nós na função Firefox getFirstChild (node) {while (node.nodetype! = 1) {node = node.nextsibling; } retornar o nó; } </script> </ad Head> <body> Rolução Demonstração do efeito de tempo <Hr> <div> <div id = "box"> <div> <img src = "../ img/head/1.png"/> </div> <div> <mg src = "../ img/head/2.png"/> </> <// src = "../ img/head/3.png"/> </div> <div> <img src = "../ img/head/4.png"/> </div> </div> </div> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.