JavaScript implementiert einen langen Bild-Scroll-Effekt

In diesem Artikel wird der spezifische Code für das Scrollen langer Bilder in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Beim Scrollen langer Bilder wird ein Timer verwendet:

Lassen Sie uns zunächst den Timer überprüfen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Timer-Überprüfung</title>
</Kopf>
<Text>
    <button id="start">Starten</button>
    <button id="stop">Schließen</button>
    <Skripttyp="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var num = 0, Timer = null;

        start.onclick = Funktion (){
            // Wenn Sie einen Timer verwenden, löschen Sie zuerst den ursprünglichen Timer und schalten Sie ihn dann ein. Sie können versuchen, unten clearInterval(timer); auszukommentieren und dann mehrmals auf die Schaltfläche „Einschalten“ zu klicken, um die Auswirkungen zu vergleichen. clearInterval(timer);
            Timer = Intervall festlegen(Funktion (){
                Zahl++;
                konsole.log(num);
            },1000)
        }
        stop.onclick = Funktion (){
            Intervall löschen(Timer);
        }
    </Skript>
</body>
</html>

Nachdem wir den Timer-Inhalt überprüft haben, schauen wir uns den Code für langes Bild-Scrollen an:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Langer Bildlaufeffekt</title>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        Körper{
   Hintergrundfarbe: #000;
  }
        #Kasten{
   Breite: 658px;
   Höhe: 400px;
   Rand: 1px durchgezogen #ff6700;
   Rand: 100px automatisch;
   Überlauf: versteckt;
   Position: relativ;
  }
        #box img{
   Position: absolut;
   oben: 0;
   links: 0;
  }
        #Boxspanne{
            Position: absolut;
            Breite: 100 %;
            Höhe: 50%;
            links: 0;
            Cursor: Zeiger;
        }
        #Box #oben{
   oben: 0;
  }
  #Box #unten{
   unten: 0;
  }
    </Stil>
</Kopf>
<Text>
    <div id="box">
        <img src="img/timer.jpeg" alt="">
        <span id="nach oben"></span>
        <span id="bottom"></span>
    </div>
    <Skripttyp="text/javascript">
        // 1. Holen Sie sich die Ereignisquelle var box = document.getElementById('box');
  var pic = document.getElementsByTagName('img')[0];
  var divTop = document.getElementById('top');
  var divBottom = document.getElementById('bottom');

        // 2. Ereignis hinzufügen, var num = 0, timer = null;
        divBottom.onmouseover = Funktion () {
            // Lösche den vorherigen Beschleunigungseffekt clearInterval(timer);
   // Bild nach unten scrollen lassen timer = setInterval(function () {
     Zahl -= 10;
     // Diese -3666 wird entsprechend dem Bild angepasst if (num >= -3666) {
     Bild.Stil.oben = Num + "px";
    }anders{
     Intervall löschen(Timer);
    }
   },50);
  }
  divTop.onmouseover = Funktion () {
   Intervall löschen(Timer);
   // Bild nach oben scrollen lassen timer = setInterval(function () {
     Zahl += 10;
    wenn(Zahl <= 0){
     Bild.Stil.oben = Num + "px";
    }anders{
     Intervall löschen(Timer);
    }
   },100);
  }
  // Scrollen beenden, wenn die Maus wegbewegt box.onmouseout = function () {
   Intervall löschen(Timer);
  }
    </Skript>
</body>
</html>

Ich werde das Effektbild hier nicht einfügen. Sie können es bei Bedarf selbst ausprobieren (denken Sie daran, das lange Bild zu finden).

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS realisiert den Effekt des Auf- und Abscrollens langer Bilder
JS-Bild nahtloser und reibungsloser Scrollcode
js realisiert nahtloses Scrollen von Bildern
Ein mit js implementierter Codegenerator für Flash-Bildlauf und -Rotation
JS implementiert automatischen Loop-Scrolling-Code für Text oder Bilder innerhalb von div
js-Code zur Implementierung des kontinuierlichen Scrollens von Bildern im Div+CSS-Layout
js jquery erstellte kontinuierlichen Scrollcode für Bilder
JavaScript-Code zum Erzielen eines Bildschleifen-Scrolleffekts
JS zum Erzielen eines horizontalen Bildlaufeffekts von Bildern, Beispielcode
js realisiert den Effekt des Scrollens von Bildern nach links und rechts

<<: MySQL ermöglicht langsame Abfragen (Einführung in die Verwendung der EXPLAIN-SQL-Anweisung)

>>: MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends