Home >Web Front-end >JS Tutorial >Example sharing of jQuery realizing dynamic effects of text printing

Example sharing of jQuery realizing dynamic effects of text printing

小云云Original: 2018-01-17 14:14:511816browse

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>

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>

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!

JavaScript jquery html JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery pjax simple example summaryNext article：jQuery pjax simple example summary

See more

Example sharing of jQuery realizing dynamic effects of text printing

Related articles