使用javascript开发超棒的动画文字书写效果

在线演示  本地下载

今天我们将介绍一个来自 script-tutorials的 javascript教程，在这个教程中，我们将介绍如何使用 javascript来生成一个动画的文字书写效果。相信大家一定会喜欢！

HTML代码

<div id="letter"></div> <img id="inkwell1" src="inkwell1.gif" alt="inkwell1" /> <img id="inkwell2" src="inkwell2.gif" alt="inkwell2" />   <div id="letter_src"> A man named Grant once foi|und a box of old Papers in his dwelling||||||||house. Grant didn't like old things. So he burned most of the papers. But one of these papers was a letter. He read it. A well-known writer had written it.<br><br> 'About a million|||||||hundred years ago nobody know about him|||this writer,' thought Grant. 'Nobody read his books. But now everybody reads him. Some people like to buy old letters. I can get a lot of money for this letter.'<br><br> But the letter looked dirty. So Grant decided to wash |||||clean it. He worked hard and soon the letter looked new. Grant was not|||||||was very happy.<br><br> He took the letter to a shop in London where they bought and sold old papers. 'I want to sell this letter,' Grant said to the man in shop. 'It is a well-known writer's letter. How much will you give me for it?'<br><br> The man looked at the letter for a long time. 'I'll give you two pounds for it,' he said at last.<br><br> 'Only two pounds!' said Grant. 'But people pay ten pounds for old letters. And I have even cleaned it.'<br><br> 'I can see that,' said the man. 'That's the mistake. People who buy old papers like dirty papers more than clean papers.'<br><br> </div>

javascript代码：

window.onload = function(){ // public variables var vLetter = document.getElementById('letter'); var iSpeedInk = 5;   // other variables var sText = document.getElementById('letter_src').innerHTML; var iCurChar = 0; var sChars = '<span>'; var iCurInk = 0; var sCurCaret = ''; var sCaret = " <img src="pen.gif" style='position:absolute' />";   var doStep = function () { // current char var sChar = sText.charAt(iCurChar);   // default char delay var iDelay = 32;   if (sChar == '') { sCurCaret = ''; } else if (sChar == '|') { // we use | symbol to emulate 'error' symbol sChar = ''; sChars = sChars.substring(0, sChars.length-1); iDelay = 64; } else if (sChar == '<') { // pass tags var iPos = sText.indexOf('>', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '&') { // pass html entities var iPos = sText.indexOf(';', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '.') { // custom delay in case of . symbol iDelay = 300; } else if (sChar == ',') { // custom delay in case of , symbol iDelay = 100; } else if (sChar == ' ') { // custom delay in case of space symbol iDelay = 32; } else if (iCurChar > 5) { sCurCaret = sCaret; }   // expenditure of ink if (sChar == ' ') { iCurInk += iSpeedInk; sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar; }   if (document.getElementById('inkwell2').style.visibility == 'visible') { sCurCaret = sCaret; document.getElementById('inkwell2').style.visibility = 'hidden'; sChar = '</span><span style="color:RGB(0,0,0)">' + sChar; }   // refresh Ink if (iCurInk > 160) { iCurInk = 0; document.getElementById('inkwell2').style.visibility = 'visible'; iDelay = 1000; sCurCaret = ''; }   // add current char to chars sChars += sChar;   // hide the caret at the end of the letter if (iCurChar == sText.length - 1) sCurCaret = '';   // update letter with new chars vLetter.innerHTML = sChars + sCurCaret;   // goto next char iCurChar++;   // next step if (iCurChar < sText.length) { setTimeout(doStep, 20 + iDelay); } }   doStep(); };

整个代码使用不同的符号来生成不同的书写方式或者错误模拟，希望大家喜欢这个教程，如果你有任何问题，请给我们留言，谢谢！

来源： 使用javascript开发超棒的动画文字书写效果