Marquee-Element in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Marquee-Element in JavaScript
Muhammad Muzammil Hussain 20 Juni 2023
JavaScript JavaScript Element
  1. Verwenden Sie das Marquee-Tag in HTML
  2. Verwenden Sie JavaScript, um die Marquee-Funktion hinzuzufügen
Marquee-Element in JavaScript

Meistens müssen wir unseren Inhaltstext auf einer Website oder Webseite dekorieren. Marquee ist eine dieser Funktionen, um die Darstellung von Inhalten zu verschönern.

Wenn wir den Inhalt automatisch von oben nach unten, von unten nach oben, von links nach rechts und von rechts nach links scrollen müssen, verwenden wir normalerweise das Marquee in unserem Quellcode. In diesem Artikel lernen wir das HTML-Standard-Tag und den benutzerdefinierten JavaScript-Code kennen, um Marquee zu implementieren.

Verwenden Sie das Marquee-Tag in HTML

In HTML gibt es ein Marquee-Tag zum automatischen Scrollen des Webinhalts. Standardmäßig wird der Inhalt von rechts nach links gescrollt, aber wir können die Scrollrichtung (oben, unten, rechts, links) wie direction="up" anpassen, aber dieses Tag ist in HTML 5 veraltet.

Beispielcode:

<html>
<head>
      <title>Example for HTML Marquee Tag</title>
  </head>

      <h1>
          Delft stack marquee tag example
      </h1>

  <marquee width="40%" direction="up" height="30%">
      Delft stack is a best website to learn programming skills!
</marquee>
</html>

Im obigen HTML-Quellcode haben wir das Standard-HTML-Marquee-Tag für Textinhalte verwendet. Wir haben die Richtung nach oben angepasst, Höhe und Breite mit Inline-CSS definiert.

Verwenden Sie JavaScript, um die Marquee-Funktion hinzuzufügen

Wir können die Marquee-Funktion mithilfe von benutzerdefinierten Funktionen mithilfe von JavaScript und J-Query zu Webinhalten hinzufügen. Wir können den Inhalt mithilfe von Höhen- und Breitenpositionen in die gewünschte Richtung scrollen.

Wir definieren die ID für den Inhalt, den wir animieren und scrollen möchten, und übergeben diese IDs an die benutzerdefinierte Funktion eines Marquee.

Beispielcode:

<html>
<head>
    <title>Example for JavaScript Marquee</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<style>
#text{
  cursor:pointer;
  overflow:hidden;
  position:absolute;
  left:10px;
  margin-right:10px;
  top:10px;
}
</style>

 <script>
function marquee(a, b) {
    var width = b.width();
    var start_pos = a.width();
    var end_pos = -width;

    function scroll() {
        if (b.position().left <= -width) {
            b.css('left', start_pos);
            scroll();
        }
        else {
            time = (parseInt(b.position().left, 10) - end_pos) *
                (10000 / (start_pos - end_pos)); //we can increase or decrease speed by changing value 10000
            b.animate({
                'left': -width
            }, time, 'linear', function() {
                scroll();
            });
        }
    }

    b.css({
        'width': width,
        'left': start_pos
    });
    scroll(a, b);
}

$(document).ready(function() {
    marquee($('#display'), $('#text'));  //we need to add name of container element & marquee element
});
    </script>
     <h1 id="text" >
        Delft stack is a best website to learn programming skills!
    </h1>
</html>

Code ausführen

Wir haben J-Query Google CDN im obigen Quellcode verwendet, um J-Query-Funktionen zu verwenden. Fügen Sie den J-Query Google CDN-Link in den Kopf der HTML-Seitenquelle ein.

Wir haben eine benutzerdefinierte Marquee-Funktion deklariert. Es hilft, den Inhalt mithilfe von Höhen-Breiten-Positionen und CSS zu animieren und zu scrollen.

Wir haben das H1-Tag verwendet, um den Textinhalt anzuzeigen und die ID für dieses HTML-Element zu definieren. Innerhalb von (document).ready() haben wir eine Marquee-Funktion übergeben, die die Element-ID als Argument nimmt und dieses spezifische HTML-Element animiert.

Verwandter Artikel - JavaScript Element