Compétences code_javascript de mise en œuvre de l'effet de défilement fluide et transparent JS

Dans cet article, nous implémentons l'effet publicitaire défilant en JS pur.

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" / alt="Compétences code_javascript de mise en œuvre de l'effet de défilement fluide et transparent JS" ></a>

 <a href="#"><img  src="banner2.jpg" border="0" / alt="Compétences code_javascript de mise en œuvre de l'effet de défilement fluide et transparent JS" ></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 selon 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é sur le côté droit est inférieur au contenu masqué sur le côté gauche, le conteneur parent continuera à être déplacé vers la gauche pour masquer les ombres. 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.

Le code d'implémentation de l'effet de défilement fluide et transparent JS ci-dessus est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.