JavaScript permet d'acquérir des compétences scrolling_javascript fluides et transparentes

Dans cet article, nous implémentons l'effet publicitaire roulant en JS pur pour votre référence. Le contenu spécifique est le suivant

Montrons d'abord le produit fini :

Le premier est le style de la page Web :

#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 1280px;
 height:200px;
 }
 #demo img {
 border: 3px solid #F2F2F2;
 }
 #indemo {
 float: left;
 width: 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" border="0" /></a>
 <a href="#"><img src="banner2.jpg" border="0" /></a>
 </div>
 <div id="demo2"></div>
 </div>
 </div>

Implémentation JS spécifique :

<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.offsetWidth
else{

 tab.scrollLeft++;

 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval
(Marquee,speed)};
</script>

Ce qu'il faut noter ici est :

scrollLeft représente la largeur de la page cachée sur le côté gauche de la barre de défilement lorsque la page défile vers la droite à l'aide de la barre de défilement.

offsetWidth est la largeur visible de l'objet, y compris les barres de défilement et autres bords, qui changera avec la taille d'affichage de la fenêtre.

La méthode

setInterval() peut appeler une fonction ou calculer une expression en fonction de la période spécifiée (en millisecondes). La méthode setInterval() continuera à appeler la fonction jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée.

Ce sera plus facile à comprendre une fois que vous aurez compris la mise en œuvre spécifique.

Le principe de mise en œuvre est le suivant : copiez d'abord le contenu qui doit défiler. Lorsque le contenu affiché par le div droit est le même que le contenu de l'ombre gauche, le contenu de l'ombre sur le côté gauche du conteneur parent est affiché de cette manière, le contenu de l'ombre gauche est affiché et le contenu. à droite est à nouveau masqué. Si le contenu affiché à droite est inférieur au contenu masqué à gauche, le conteneur parent continuera à être déplacé vers la gauche pour le masquer. Une chose à noter est que puisque les deux images sont placées sur le côté gauche en même temps, lorsque la moitié du côté droit est affichée, l'ombre cachée sur le côté gauche sera entièrement affichée, et parce que le contenu affiché à droite Le côté est différent du contenu du côté gauche. Le contenu de gauche est le même, donc l'effet de défilement circulaire est obtenu.

Un défilement fluide est obtenu de cette manière.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.