Neste artigo, percebemos o efeito de rolar a publicidade no modo JS puro.
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 marquee () {if (tab2.offsetWidth-Tab.ScrollLeft == 0) tab.scrollleft- = tab1.offsetWidth else {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 funções ou calcular expressões de acordo com períodos especificados (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 do que o conteúdo oculto no lado esquerdo, continue falando sobre o contêiner pai que deseja passar para a esquerda para realizar a sombra escondida. 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 código acima para implementar efeitos de rolagem suave e sem costura é todo o conteúdo que compartilhei com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.