En este artículo, nos damos cuenta del efecto de desplazar la publicidad en modo JS puro.
Mostremos el producto terminado primero:
En primer lugar, el estilo de la página web:
#demo {fondo: #fff; desbordamiento: oculto; borde: 1px discontinoso #ccc; Ancho: 1280px; Altura: 200px; } #Demo img {border: 3px sólido #f2f2f2; } #Indemo {float: izquierda; Ancho: 800%; } #demo1 {float: izquierda; } #demo2 {float: izquierda; }El diseño es el siguiente:
<div id = "Demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"> <img src = "banner2.jpg"/> </a> </div> <iv Id = "demo2"> </Div Div "Diven
Implementación de JS específica:
<script> var velocidad = 10; var tab = document.getElementById ("demo"); var tab1 = document.getElementById ("demo1"); var tab2 = document.getElementById ("demo2"); tab22.innerhtml = tab1.innerhtml; function marquee () {if (tab22.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidth else {tab.scrollleft ++; }} var mymar = setInterval (marquee, velocidad); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseOut = function () {mymar = setInterval (marquee, velocidad)}; </script>Qué observar aquí es:
Scrollleft representa el ancho de la página oculto a la izquierda de la barra de desplazamiento cuando la página usa la barra de desplazamiento para desplazarse hacia la derecha.
OffsetWidth es el ancho visible del objeto, que envuelve la barra de desplazamiento y es igual a los bordes, que cambiará con el tamaño de visualización de la ventana.
El método SetInterval () puede llamar a las funciones o calcular expresiones de acuerdo con los períodos especificados (en milisegundos). El método SetInterval () seguirá llamando a la función hasta que se llame ClearInterval () o se cierre la ventana.
Es fácil de entender si comprende esta implementación específica.
El principio de implementación es el siguiente: primero copia una copia del contenido que debe desplazarse. Cuando el contenido que muestra el DIV a la derecha es el mismo ancho que el contenido oculto en la sombra izquierda, el contenido oculto en la sombra izquierda del contenedor principal se muestra, de modo que el contenido oculto en la sombra izquierda se muestra y el contenido oculto a la derecha se vuelve a conducir. Si el contenido en el lado derecho muestra menos que el contenido oculto en el lado izquierdo, continúe hablando del contenedor principal que quiere moverse hacia la izquierda para darse cuenta de la sombra oculta. Una cosa a tener en cuenta es que dado que dos imágenes se colocan en el lado izquierdo al mismo tiempo, cuando el lado derecho se muestra a medias, la sombra oculta en el lado izquierdo se mostrará completamente. Debido a que el contenido que se muestra en el lado derecho es el mismo que el contenido en el lado izquierdo, se logra el efecto del desplazamiento del bucle.
Se logra este desplazamiento suave.
El código anterior para implementar los efectos de desplazamiento sin problemas y sin problemas es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.