Beispiel für die gemeinsame Nutzung von jQuery zur Realisierung dynamischer Effekte des Textdrucks-js-Tutorial-php.cn

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

小云云

Freigeben： 2018-01-17 14:14:51

Original

1811 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!