In diesem Artikel erkennen wir, wie sich die Werbung im reinen JS -Modus für Ihre Referenz auswirkt. Der spezifische Inhalt ist wie folgt
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; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Funktion; Marquee () {if (tab2.Offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.OffsetWidtHelse {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, Geschwindigkeit)}; </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 eine Funktion aufrufen oder einen Ausdruck gemäß dem angegebenen Zeitraum (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, sagen Sie weiterhin, dass der übergeordnete Container nach links wechseln möchte, um sich zu verstecken. 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.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.