Intermittierender und nahtloser Scrolling -Effekt (der Effekt der Aufzeichnung mit GIF ist nicht sehr gut. Wenn Sie interessiert sind, können Sie den Code herunterladen), der spezifische Inhalt ist wie folgt
Code:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> *{margin: 0; padding: 0;} .box {breit: 500px; Höhe: 400px; .Block {Position: relativ; Breite: 500px; Höhe: 400px; Überlauf: Hidden;} .Item {Höhe: 40px; Hintergrund: rot; Farbe: #fff; Funktion (JSON) {var objscroll = document.getElementById (json.id); objscroll.scrolltop = 0; setInterval (function () {scrolling ()}, 30)}} else {var timer; ClearInterval (Timer); window.onload = function () {// on: intermittierende Scroll/nahtlose Bildlaufhöhe: intermittierende Scrollup ({on: true, id: 'block'}); scrollup ({id: 'block2', Höhe: 120}); } </script></head><body> <div> <div id="block"> <div>1 Seamless scroll</div> <div>2 Seamless scroll</div> <div>3 Seamless scroll</div> <div>4 Seamless scroll</div> <div>5 Seamless scroll</div> <div>6 Seamless scroll</div> <div>7 Seamless scroll</div> <div>8 Seamless scroll</div> <div>9 Seamless scroll</div> <div>10 Seamless scroll</div> <div>11 seamless scroll</div> <div>12 seamless scroll</div> <div>13 seamless scroll</div> <div>14 seamless scroll</div> <div>15 seamless scroll</div> </div> </div> <div> <div id="block2"> <div>1 intermittent scroll</div> <div>1 intermittent scroll</div> <div>2 intermittent scroll</div> <div>3 intermittent scroll</div> <div>4 intermittent scroll</div> <div>5 intermittent scroll</div> <div>6 intermittent scroll</div> <div>7 intermittent scroll</div> <div>8 intermittent scroll</div> <div>9 intermittent scroll</div> <div>10 intermittent scroll</div> <div>11 intermittent scroll</div> <div>12 intermittent scroll</div> <div>13 intermittent scroll</div> <div>14 intermittent scroll</div> <div>15 intermittent scroll</div> </div> </div> </div> </body> </html>Notiz:
1. Der Boxblock sollte CSS -Überlauf sein und sich verstecken: Überlauf: versteckt
2. Es gibt zwei Funktionen: intermittierendes Scrollen/nahtloses Scrollen
3. Kopieren Sie zuerst ein Stück genau den gleichen Code und scrollen Sie sie nahtlos: Der Ausführungs -Timer erhöht den Wert von Scrolltop. Wenn der Scrolltop -Wert größer als die Boxhöhe ist, setzen Sie Scrolltop auf 0 und beginnen Sie erneut. Auf dieser Basis wird intermittierende Scrollen hinzugefügt, SetTimeout wird zeitweise ausgeführt und die angegebene Höhe stoppt, wenn Scrolltop eintrifft.
4. Frage: setInterval (function () {scrolling ()}, 30); Im Code kann es ausgeführt werden, indem auf diese Weise setInterval ('scrolling ()', 30) geschrieben werden; Das wird nicht funktionieren. Gibt es eine großartige Anleitung des Meisters? Was ist der Unterschied zwischen den beiden? Was ist der Mechanismus?
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.