Este artículo describe la implementación simple del efecto de desplazamiento sin problemas de JS. Compártelo para su referencia, como sigue:
<! Doctype html> <title> JavaScript Seamless Scroll </title> <meta charset = "utf-8" /> <meta name = "palabras clave" content = "javaScript Seamless-scroll" /> <meta name = "description" Content = "Javascript Scroll Scroll Yahei ", kaiti_gb2312, simsun} #marquee {posición: relativo; Ancho: 400px; desbordamiento: oculto; borde: 10px Solid #8080c0; } #Marquee img {border: 0px; } #marquee dl, #marquee dt, #marquee dd, #marquee a {float: izquierda; margen: 0; relleno: 0; } #Marquee dl {ancho: 1000%; Altura: 150px; } </style> <script type = "text/javaScript"> var marquee = function (id) {try {document.execCommand ("backgroundImageCache", falso, true); } catch (e) {}; var contenedor = document.getElementById (id), original = contenedor.getElementsBytagName ("dt") [0], clone = contenedor.getElementsBytagName ("dd") [0], speed = argumentos [1] || 10; clone.innerhtml = original.innerhtml; Container.scrollleft = clone.offsetleft var rolling = function () {if (Container.scrollleft == 0) {Container.scrollleft = clone.offsetleft; } else {Container.scrollleft--; }} var timer = setInterval (Rolling, Speed) // set Timer Container.OnMouseOver = function () {ClearInterval (Timer)} // Cuando el mouse se mueve a marquee, borre el temporizador y la parada desplazando el contenedor. function () {marquee ("marquee");} </script> <h1> javascript sin costuras scroll (scroll a la derecha) </h1> <div id = "marquee"> <dl> <dt> <a href = "###"> <img src = "img/o_s017.jpg"/> </a> <a. href = "###"> <img src = "img/o_s018.jpg"/> </a> <a href = "###"> <img src = "img/o_s018.jpg"/> </a> <a href = "###"> <img src = "img/o_s019.jpg" <a href = "###"> <img src = "img/o_s020.jpg"/> </a> <a href = "###"> <img src = "img/o_s021.jpg"/> </a> <a href = "###"> <img src = "img/o_s022.jgg <a href = "###"> <img src = "img/o_s022.jpg"/> </a> <a href = "###"> <img src = "img/o_s022.jpg"/> </a> <a href = "###"> <img src = "img/o_s023.jpg </dt> <dd> </dd> </dl> </div>Las representaciones son las siguientes:
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 y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.