Neste artigo, percebemos o efeito de rolar a publicidade no modo JS puro para sua referência. O conteúdo específico é o seguinte
Vamos mostrar o produto acabado primeiro:
Primeiro de tudo, o estilo da página da web:
#Demo {Background: #FFF; estouro: oculto; Border: 1px tracejado #CCC; Largura: 1280px; Altura: 200px; } #demo img {borda: 3px sólido #f2f2f2; } #indemo {float: esquerda; Largura: 800%; } #Demo1 {float: esquerda; } #Demo2 {float: esquerda; }O layout é o seguinte:
<div id = "Demo"> <div id = "Indemo"> <div id = "Demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"> <mg src = "banner2.jpg"/> </a>
Implementação específica de JS:
<Cript> var speed = 10; var tab = document.getElementById ("Demo"); var tab1 = document.getElementById ("Demo1"); var tab2 = document.getElementById ("Demo2"); tab2.innerhtml = tab1.innerhtml; função; função; Marquee () {if (tab2.offsetWidth-Tab.ScrollLeft == 0) tab.scrollleft- = tab1.offsetWidthelse {tab.scrollLeft ++; }} var myMar = setInterval (marquise, velocidade); tab.onMouseOver = function () {clearInterval (myMar)}; tab.onmouseout = function () {myMar = setInterval (marquise, velocidade)}; </script>O que observar aqui é:
ScrollLeft representa a largura da página escondida à esquerda da barra de rolagem quando a página usa a barra de rolagem para rolar para a direita.
O deslocamento da largura é a largura visível do objeto, que envolve a barra de rolagem e é igual às bordas, o que mudará com o tamanho da tela da janela.
O método setInterval () pode chamar uma função ou calcular uma expressão de acordo com o período especificado (em milissegundos). O método setInterval () continuará chamando a função até que o clearInterval () seja chamado ou a janela seja fechada.
É fácil entender se você entender essa implementação específica.
O princípio da implementação é o seguinte: primeiro copie uma cópia do conteúdo que precisa ser rolada. Quando o conteúdo exibido pela Div à direita é a mesma largura que o conteúdo oculto na sombra esquerda, o conteúdo oculto na sombra esquerda do contêiner pai é exibido, para que o conteúdo oculto na sombra esquerda seja exibido e o conteúdo escondido à direita seja reconectado. Se o conteúdo do lado direito exibir menos que o conteúdo oculto no lado esquerdo, continue dizendo que o contêiner pai deseja passar para a esquerda para alcançar o esconderijo. Uma coisa a observar é que, como duas imagens são colocadas no lado esquerdo ao mesmo tempo, quando o lado direito é exibido pela metade, a sombra escondida no lado esquerdo será totalmente exibida. Como o conteúdo exibido no lado direito é o mesmo que o conteúdo no lado esquerdo, o efeito da rolagem do loop é alcançado.
Esta rolagem suave é alcançada.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.