Dans cet article, nous réalisons l'effet de la publicité de défilement en mode JS pur.
Affichons d'abord le produit fini:
Tout d'abord, le style de page Web:
#demo {background: #fff; débordement: caché; Border: 1px en pointillé #ccc; Largeur: 1280px; hauteur: 200px; } #demo img {border: 3px solide # f2f2f2; } #indemo {float: gauche; Largeur: 800%; } # Demo1 {float: Left; } # Demo2 {float: Left; }La disposition est la suivante:
<div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="banner.jpg" /></a> <a href="#"><img src="banner2.jpg" /></a> </div> <div id="demo2"></div> </div> </div>
Implémentation spécifique de JS:
<Script> var Speed = 10; var tab = document.getElementById ("Demo"); var tab1 = document.getElementById ("Demo1"); var tab2 = document.getElementById ("Demo2"); tab2.InnerHtml = tab1.innerHTML; fonction Marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidth else {tab.scrollleft ++; }} var myMar = setInterval (Marquee, Speed); tab.onmouseOver = function () {ClearInterval (myMar)}; tab.onmouseout = function () {myMar = setInterval (Marquee, Speed)}; </cript>Que noter ici est:
Scrollleft représente la largeur de la page cachée à gauche de la barre de défilement lorsque la page utilise la barre de défilement pour faire défiler vers la droite.
Offsetwidth est la largeur visible de l'objet, qui enveloppe la barre de défilement et est égal aux bords, qui changera avec la taille d'affichage de la fenêtre.
La méthode setInterval () peut appeler des fonctions ou calculer les expressions en fonction des périodes spécifiées (en millisecondes). La méthode setInterval () continuera d'appeler la fonction jusqu'à ce que ClearInterval () soit appelé ou que la fenêtre soit fermée.
Il est facile de comprendre si vous comprenez cette implémentation spécifique.
Le principe d'implémentation est le suivant: Copiez d'abord une copie du contenu qui doit être défilé. Lorsque le contenu affiché par la div à droite est de la même largeur que le contenu caché sur l'ombre gauche, le contenu caché sur l'ombre gauche du conteneur parent est affiché, de sorte que le contenu caché sur l'ombre gauche est affiché et que le contenu caché à droite soit réchauffé. Si le contenu sur le côté droit affiche moins que le contenu caché sur le côté gauche, continuez à parler du conteneur parent qui veut se déplacer vers la gauche pour réaliser l'ombre cachée. Une chose à noter est que puisque deux images sont placées sur le côté gauche en même temps, lorsque le côté droit est à moitié affiché, l'ombre cachée sur le côté gauche sera complètement affichée. Étant donné que le contenu affiché sur le côté droit est le même que le contenu du côté gauche, l'effet du défilement de boucle est obtenu.
Ce défilement lisse est obtenu.
Le code ci-dessus pour l'implémentation des effets de défilement JS lisses et sans couture est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.