Example sharing of jQuery realizing dynamic effects of text printing-JS Tutorial-php.cn

Example sharing of jQuery realizing dynamic effects of text printing

小云云

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

Original

1771 people have browsed it

This article mainly introduces the dynamic effect of text printing based on jQuery. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Main 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>

Copy after login

For the reference of JQuery, you can first download the corresponding version from the JQuery official website, and add the corresponding version when citing. The directory is fine

The next step is to add code in the script tag to achieve the dynamic effect of the text. First add the code

<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>

Copy after login

Why is the text displayed? When it is result+ (index & 1? "_" : " "), of course it is for the dynamic effect of printing. When the subscript index is an odd number, the last character is displayed as "_", and when it is an even number, it is displayed as " " , this can create the dynamic effect of printed text.

Related recommendations:

Introducing a special effect example of javascript to achieve text typing effect

Detailed explanation of js function code for printing supermarket receipts

js client printing html how to remove the header and footer

The above is the detailed content of Example sharing of jQuery realizing dynamic effects of text printing. For more information, please follow other related articles on the PHP Chinese website!