suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die gemeinsame Nutzung von jQuery zur Realisierung dynamischer Effekte des Textdrucks

Beispiel für die gemeinsame Nutzung von jQuery zur Realisierung dynamischer Effekte des Textdrucks

小云云
小云云Original
2018-01-17 14:14:511812Durchsuche

Dieser Artikel stellt hauptsächlich den dynamischen Effekt des Textdrucks basierend auf jQuery vor. Ich hoffe, dass er jedem helfen kann.

Body-HTML


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>打印文字效果</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">

  <script/>
<head>
<body>
  <p id="typing">The furthest distance in the world.Is not between life and death.But when I stand in front of you.Yet you don&#39;t know that I love you</p>
</body>

Als Referenz für JQuery können Sie zunächst die entsprechende Version von der offiziellen JQuery-Website herunterladen . Fügen Sie einfach das entsprechende Verzeichnis hinzu

Der nächste Schritt besteht darin, Code in das Skript-Tag einzufügen, um den dynamischen Effekt des Textes zu erzielen


<script>
  $(dcument).ready(function(){
    typing();
  })
  var text;//p标签里对应的字符串
  var index = 0;//text字符串的下标
  var id;//setTimeout()的返回值,用于关闭clearTimeout(id)
  function typing()
  {
    text = $("#typing").text();
    $("#typing").text("");
    $("#typing").show();
    typed();
  }
  result = "";
  function typed(){
    result += text.charAt(index);
    $("#typing").text(result + (index & 1 ? "_" : " "));
    if(index <　text.length - 1)
    {
      index++;
      id = setTimeout("typed()", 100);
    }
    else
      clearTimeout(id);
  }
</script>

Warum wird result+ (Index & 1? „_“ : „“) für den dynamischen Effekt des Druckens verwendet? Wenn der Index eine ungerade Zahl ist, wird das letzte Zeichen als angezeigt „_“, das als gerade Zahl behandelt wird, kann bei der Anzeige den dynamischen Effekt des Druckens von Text erzeugen.

Verwandte Empfehlungen:

Einführung eines Javascript-Spezialeffektbeispiels zur Erzielung eines Texteingabeeffekts

Detaillierte Erläuterung des js-Funktionscodes zum Drucken Supermarktbelege

So entfernen Sie die Kopf- und Fußzeile beim Drucken von HTML mit dem JS-Client

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung von jQuery zur Realisierung dynamischer Effekte des Textdrucks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung eines einfachen jQuery-Pjax-BeispielsNächster Artikel：Zusammenfassung eines einfachen jQuery-Pjax-Beispiels

In Verbindung stehende Artikel

Mehr sehen