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