JS reibungslose, nahtlose Scrolling-Effekt-Implementierung, Code_Javascript-Kenntnisse

In diesem Artikel implementieren wir den Scrolling-Werbeeffekt in reinem JS.

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="/static/imghw/default1.png"  data-src="banner.jpg"  class="lazy" border="0" / alt="JS reibungslose, nahtlose Scrolling-Effekt-Implementierung, Code_Javascript-Kenntnisse" ></a>

<a href="#"><img  src="/static/imghw/default1.png"  data-src="banner2.jpg"  class="lazy" border="0" / alt="JS reibungslose, nahtlose Scrolling-Effekt-Implementierung, Code_Javascript-Kenntnisse" ></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 zu beachten ist:

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

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

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

Es wird leichter 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 auf der rechten Seite angezeigte Inhalt kleiner ist als der auf der linken Seite ausgeblendete Inhalt, wird der übergeordnete Container weiterhin nach links verschoben, um eine Schattenausblendung zu erreichen. 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.

Der obige JS-Implementierungscode für den reibungslosen und nahtlosen Scroll-Effekt ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.