Efecto de desplazamiento intermitente y sin problemas (el efecto de la grabación con GIF no es muy bueno, si está interesado, puede bajar el código), el contenido específico es el siguiente
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> sin costura desplazada </title> <style> *{margin: 0; padding: 0;} .box {width: 500px; height: 400px; margen: 40px autoconsal .Block {posición: relativo; ancho: 500px; altura: 400px; overflow: hidden;} .Item {altura: 40px; fondos: rojo; color: #fff; line-height: 40px; text-align: centro;} .item: nth-child (2n) {fondo: #000} </syle> <script> var scrollup () función (json) {var objScroll = document.getElementById (json.id); objscroll.scrolltop = 0; setInterval (function () {scrolling ()}, 30); ClearInterval (Timer); Window.Onload = function () {// ON: Intermitente Scroll/Altura de desplazamiento sin costuras: Intermitente Scrollup ({en: true, id: 'bloque'}); scrollup ({id: 'block2', altura: 120}); } </script> </head> <body> <viv> <div id = "bloque"> <div> 1 desplazamiento sin costuras </div> <div> 2 scroll sin costuras </div> <div> 3 scroll sin costura </div> <div> 4 desplazamiento sin costuras </shiv> <div> 5 desplazamiento sin costuras </div> <div> 6 desplazamiento de costura </div> sseting </divil <divil <divil <divonsonsing inesper desplazamiento </div> <div> 9 desplazamiento sin costuras </div> <div> 10 scroll sin costura </div> <div> 11 scroll sin costuras </div> <div> 12 scroll sin costura </div> <div> 13 scroll sin costura </div> <div> 14 scroll sin costura </div> <div> 15 scrroll sin costura </div> </div> <div> <div> <iv = "bloquea" ") desplazamiento </div> <div> 1 desplazamiento intermitente </div> <div> 2 desplazamiento intermitente </div> <div> 3 desplazamiento intermitente </div> <div> 4 scroll intermitente </div> <div> 5 intermitente scroll </div> <div> 6 desplazamiento intermedio </div> <div> 7 intermitt scroll </div> div> 8 intermettent 8 intermisTent 8 <Viv> <div> 9 desplazamiento intermitente </div> <div> 10 desplazamiento intermitente </div> <div> 11 desplazamiento intermitente </div> <div> 12 desplazamiento intermitente </div> <div> 13 desplazamiento intermitente </div> <div> 14 desplazamiento intermitente </div> <div> 15 intermetente desplazamiento </div> </div> <div> div> </div> </body> </html>Nota:
1. El bloque de la caja debe ser desbordamiento de CSS y ocultar: desbordamiento: oculto
2. Hay dos funciones: desplazamiento intermitente/desplazamiento sin costuras
3. Primero copie una pieza exactamente del mismo código y desplácese sin problemas: el temporizador de ejecución sigue aumentando el valor de scrolltop. Cuando el valor de ScrollTop sea mayor que la altura del cuadro, configure el scrolltop en 0 y comience nuevamente. El desplazamiento intermitente se agrega sobre esta base, SetTimeout se ejecuta de manera intermitente y la altura especificada se detiene cuando llega ScrollTop.
4. Pregunta: setInterval (function () {scrolling ()}, 30); En el código, se puede ejecutar escribiendo de esta manera, setInterval ('scrolling ()', 30); Esto no funcionará. ¿Hay alguna gran guía de maestría? ¿Cuál es la diferencia entre los dos? ¿Cuál es el mecanismo?
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.