Typewriter subtitle effect implemented by jquery

I remember that when I was watching TV, sometimes the text appeared immediately after the TV, with the subtitle effect of the typewriter ticking the sound, I was often curious about the effect. This weekend, when I had no class, I thought about how to use JavaScript to implement the typewriter effect. It took about an hour to work out, and there were only dozens of lines of code.

Let's talk about the following idea: some typical HTML container labels of nested text can be like this:

1 <span> a line of text nested in the span label </span>
2 <p> A piece of text nested in the p Mark </>
3 <div> A piece of text nested in the DIV tag </div>

Therefore, we must first obtain the internal content of the container. This can be obtained by assigning an ID to the container, using the $ ("# ID" ).html () method of jquery, and assigning the obtained content to a string variable. Next, let's set a cursor with a step of 1 in one direction and judge it by word. If the character "<" is skipped, This is done because some labels are nested, for example:

1 <span> nested use of <font color = "red"> tags </font>. In this case
2. Skip the label on the inner layer because the label on the inner layer only provides a representation. </span>

In this case, you should skip the labels in the inner layer because they only provide a representation and do not belong to the body. Therefore, the cursor should jump to the next position after the corresponding ">" character. Finally, we use the substring () method to intercept the object. The object is a string variable that previously received the content of the tag, and the content is a text segment between the starting position and the current cursor location. In this way, the text content becomes longer.

Of course, because the typewriter effect is required, we can use the character "_" to simulate a cursor. Use the string "_" and "" to simulate the flickering effect of the cursor. This can be achieved by using the bitwise and of the cursor and 1, because the backward walk of the cursor makes the bitwise AND result transform between 0 and 1, therefore, the blinking effect of the cursor is also displayed, and then the cursor is appended to the end of the currently displayed text content.

The setinterval () method can be used as a timer to determine the character type by word. The advantage of this can also allow us to customize the speed of a typewriter. As shown in the parameter speed in the typewriter method. When the cursor moves to the end of the internal content, do not forget to call clearinterval () to eliminate the timer.

The code for the entire function is as follows:

 1 (function(a) {
 2     a.fn.typewriter = function(speed) {
 3         this.each(function() {
 4             var d = a(this),
 5             c = d.html(),
 6             b = 0;
 7             d.html("");
 8             var e = setInterval(function() {
 9                 var f = c.substr(b, 1);
10                 if (f == "<") {
11                     b = c.indexOf(">", b) + 1
12                 } else {
13                     b++
14                 }
15                 d.html(c.substring(0, b) + (b & 1 ? "_": ""));
16                 if (b >= c.length) {
17                     clearInterval(e)
18                 }
19             },
20             speed)
21         });
22         return this;
23     }
24 })(jQuery);

The usage is simple, for example:

1 <p id = "p1"> A piece of text nested in the p tag </P>

2 <p id = "p2"> <span> tag </span> nested in the p tag </P>

REFERENCE The jquery library on the HTML page, and then introduce the typewriter JS file. Then call the method:

1 $("p1").typewriter(100); 
2 $("p2").typewriter(200);

You can.

See effect: http://www.wandouyouxi.com/cnblogs/typewreiterDemo/demo.html

Demo download: http://www.wandouyouxi.com/cnblogs/typewreiterDemo.zip

It is worth noting that if the text content contains characters "<" and ">", it cannot be displayed because the methods will skip them as HTML tags.

Thank you for reading this article. If it is reproduced, indicate the source.