En este artículo, nos damos cuenta del efecto de la publicidad en el modo JS puro para su referencia. El contenido específico es el siguiente
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 speed = 10; var tab = document.getElementById ("demo"); var tab1 = document.getElementById ("demo1"); var tab2 = document.getElementById ("demo2"); Tab2.innerhtml = tab1.innerhtml; function; Marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidthelse {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 una función o calcular una expresión de acuerdo con el período especificado (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 diciendo que el contenedor principal quiere moverse hacia la izquierda para lograr escondidas. 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.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.