In diesem Artikel erkennen wir die Auswirkung der Scrollenwerbung im reinen JS -Modus.
Zeigen wir zuerst das fertige Produkt:
Zunächst der Webseitenstil:
#Demo {Hintergrund: #fff; Überlauf: versteckt; Grenze: 1PX gestrichelt #CCC; Breite: 1280px; Höhe: 200px; } #demo img {border: 3px fest #f2f2f2; } #indemo {float: links; Breite: 800%; } #Demo1 {float: links; } #Demo2 {float: links; }Das Layout ist wie folgt:
<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>
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; Funktion marquee () {if (tab2.Offsetwidth-tab.scrollleft == 0) tab.scrollleft- }} var mymar = setInterval (marquee, Geschwindigkeit); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, speed)}; </script>Was hier zu beachten ist:
Scrollleft repräsentiert die Breite der Seite links hinter der Bildlaufleiste, wenn auf der Seite die Bildlaufleiste nach rechts scrollen.
Die Offsetwidth ist die sichtbare Breite des Objekts, die die Bildlaufleiste umhüllt und den Kanten entspricht, die sich mit der Anzeigegröße des Fensters ändert.
Die setInterval () -Methode kann Funktionen aufrufen oder Ausdrücke gemäß festgelegten Zeiträumen (in Millisekunden) berechnen. Mit der Methode setInterval () werden die Funktion weiter aufgerufen, bis ClearInterval () aufgerufen oder das Fenster geschlossen ist.
Es ist leicht zu verstehen, ob Sie diese spezielle Implementierung verstehen.
Das Implementierungsprinzip lautet wie folgt: Kopieren Sie zuerst eine Kopie des Inhalts, der gescrollt werden muss. Wenn der vom Div rechts angezeigte Inhalt die gleiche Breite ist wie der auf dem linke Schatten versteckte Inhalt, wird der auf dem linke Schatten des übergeordnete Container versteckte Inhalt angezeigt, so dass der auf dem linke Schatten versteckte Inhalt angezeigt wird und der in der rechte Versteck versteckte Inhalt wieder aufgelöst wird. Wenn der Inhalt auf der rechten Seite weniger als den auf der linken Seite versteckten Inhalt zeigt, sprechen Sie weiter über den übergeordneten Container, der nach links bewegen möchte, um den versteckten Schatten zu erkennen. Eine Sache zu beachten ist, dass zwei Bilder gleichzeitig auf der linken Seite platziert werden, wenn die rechte Seite halb angezeigt wird, der auf der linken Seite versteckte Schatten vollständig angezeigt wird. Da der auf der rechte Seite angezeigte Inhalt dem Inhalt auf der linken Seite übereinstimmt, wird der Effekt des Schleifenscrollens erreicht.
Dieses glatte Scrollen wird erreicht.
Der obige Code für die Implementierung von JS -reibungslosen und nahtlosen Scrolling -Effekten ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.