JavaScript ermöglicht reibungsloses und nahtloses Scrollen_Javascript-Fähigkeiten

In diesem Artikel implementieren wir den rollierenden Werbeeffekt in reinem JS als Referenz. Der spezifische Inhalt ist wie folgt

Lassen Sie uns zuerst das fertige Produkt zeigen:

Der erste ist der Webseitenstil:

#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;
 }

Das Layout ist wie folgt:

 <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>

Spezifische JS-Implementierung:

<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>

Was hier beachtet werden sollte ist:

scrollLeft stellt die Breite der Seite dar, die auf der linken Seite der Bildlaufleiste verborgen ist, wenn die Seite mithilfe der Bildlaufleiste nach rechts gescrollt wird.

offsetWidth ist die sichtbare Breite des Objekts, einschließlich Bildlaufleisten und anderer Kanten, die sich mit der Anzeigegröße des Fensters ändert.

Die Methode

setInterval() kann eine Funktion aufrufen oder einen Ausdruck gemäß dem angegebenen Zeitraum (in Millisekunden) berechnen. Die setInterval()-Methode ruft die Funktion weiterhin auf, bis clearInterval() aufgerufen wird oder das Fenster geschlossen wird.

Es wird einfacher zu verstehen sein, wenn Sie die spezifische Implementierung verstanden haben.

Das Implementierungsprinzip ist wie folgt: Kopieren Sie zuerst den Inhalt, der gescrollt werden muss. Wenn der vom rechten Div angezeigte Inhalt mit dem Inhalt des linken Schattens übereinstimmt, wird der Inhalt des Schattens auf der linken Seite des übergeordneten Containers angezeigt. Auf diese Weise wird der Inhalt des linken Schattens angezeigt rechts ist wieder ausgeblendet. Wenn der rechts angezeigte Inhalt kleiner ist als der links ausgeblendete Inhalt, wird der übergeordnete Container weiterhin nach links verschoben, um ihn auszublenden. Zu beachten ist, dass, da die beiden Bilder gleichzeitig auf der linken Seite platziert werden, bei Anzeige der Hälfte der rechten Seite der verborgene Schatten auf der linken Seite vollständig angezeigt wird und der Inhalt auf der rechten Seite angezeigt wird Die Seite unterscheidet sich vom Inhalt auf der linken Seite. Der Inhalt auf der linken Seite ist derselbe, sodass der Effekt des kreisförmigen Scrollens erzielt wird.

Auf diese Weise wird ein reibungsloses Scrollen erreicht.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.