JS实现的手写书信效果

重点：

  一：两个<div>标签，一个letter_src用于存放将逐一显示的文档内容（本身内容不显示），另一个letter将通过innerHTML显示letter_src中的内容。（这样的设计很巧妙！）

  二：两张动态图片pen.gif和inkwell2.gif.(一开始我还真想不到这是两张动态图片，还自己捉摸着用ＪＳ是怎么实现这种效果的，原来．．．)

  三：一个CSS3新属性：background-size.属性值cover,contain,auto的不同运用。

  四：事件window.onload()，网页在一打开就会运行ＪＳ

  五：最重要的函数doStep()的创建和调用.setTimeout(doStep, iDelay)函数的运用其实用到了高级语言编程里的递归思想。文档内容是一个字符一个字符的加进innerHTML中的，但每个字符的处理方式都是一样，只是会有不同的情况，doStep（）函数其实就是一个处理文档字符并将其显示的函数。

  六：字符的几种情况：

           1.正常字符 直接sChars += SChar;

           2.模拟错误情况，用"|"表示写错的字符

           3.内置标签起始符"<"

           4.内置特殊字符起始符"&"

           5.句截至符号"."

           6.分号","

           7.最最重要的单词截至符——空格" "

  七：iCurInk的巧妙使用（实现的单词颜色改变）

  八：inkwell2.gif的隐藏和显示

 

主函数dosTep()代码：

  1 window.onload = function(){
  2                 /*
  3                 整个letter部分的内容由以下构成：
  4                     一：字符
  5                     二：空格
  6                     三：错误emulator—— “|”
  7                     四：段截止符：“.”
  8                     五：“,”
  9                     六：文章截止符“”
 10                 每种符号都有自己的处理方式
 11                 */
 12                 
 13                     //用到的变量
 14                     var vLetter = document.getElementById("letter");
 15                     var iSpeedInk = 5;
 16                     var sText = document.getElementById("letter_src").innerHTML;
 17                     var iChar = 0;
 18                     var sChars = "<span>";
 19                     var iCurInk = 0;                  //设置iCurInk变量，墨汁颜色的最大值
 20                   var sCurCaret = "";
 21                   var sCaret = "&nbsp;<img src='pen.gif' style='position:absolute' />";        //空格了留的很巧妙
 22                   
 23                   //主要函数
 24                   var doStep = function(){
 25                       var sChar = sText.charAt(iChar);
 26                       var iDelay = 32;
 27                       
 28                       //判断字符
 29                       if(sChar == "")                                   //文章结束标志
 30                         {
 31                             sCurCaret = "";
 32                         }
 33                       
 34                       else if(sChar == "|")                         //遇到错误单词
 35                           {
 36                               sChar = "";
 37                               sChars = sChars.substring(0, sChars.length - 1);
 38                               iDelay = 64;
 39                           }
 40                       else if(sChar == "<")                        //转行
 41                           {
 42                               var iPos = sText.indexOf(">",iChar);
 43                               sChar = sText.substring(iChar, iPos + 1);
 44                               iChar = iPos;
 45                           }
 46                       else if(sChar == "&")                          //html 特殊字符
 47                           {
 48                               var iPos2 = sText.indexOf(";",iChar);
 49                               sChar = sText.substring(iChar, iPos2 +１);
 50                               iChar = iPos2;
 51                           }
 52                       else if(sChar == ".")
 53                           {
 54                               iDelay = 300;
 55                           }
 56                       else if(sChar == ",")
 57                           {
 58                               iDelay = 100;
 59                           }
 60                       else if(iChar > 5)
 61                           {
 62                               sCurCaret = sCaret;
 63                           }
 64                           
 65                       if(sChar == " ")                             //刚写完一个单词
 66                         {
 67                             iCurInk += iSpeedInk;
 68                             sChar = '</span><span style="color:rgb(' + iCurInk + ',' + iCurInk + ',' + iCurInk + ')">' + sChar;
 69                         }
 70                       if(document.getElementById("inkwell2").style.visibility == "visible")
 71                        {
 72                           sCurCaret = sCaret;
 73                           sChar = "</span><span style='color:rgb(0,0,0)'>" + sChar;
 74                           document.getElementById("inkwell2").style.visibility = "hidden";
 75                        }
 76                       
 77                       if(iCurInk > 160)                //设置计数值，重新蘸取墨汁
 78                        {
 79                          iCurInk = 0;
 80                          document.getElementById("inkwell2").style.visibility = "visible";
 81                          iDelay = 1000;
 82                          sCurCaret = "";
 83                        }
 84                                         
 85                       sChars += sChar;
 86                       
 87                       if(iChar == sText.length - 1)
 88                       {
 89                           sCurCaret = "";
 90                       }
 91                       
 92                       vLetter.innerHTML = sChars + sCurCaret;
 93                       
 94                       iChar++;
 95                       
 96                       if(iChar < sText.length)
 97                        {
 98                            setTimeout(doStep, 20 + iDelay);           //iDelay值得设置为正常写字的速度
 99                        }
100                       }        //dostop()函数
101                   doStep();              //必须先调用函数
102                 };

资料来源：

http://www.script-tutorials.com/animated-old-letter/

 

posted @ 2012-10-21 21:52  伊晗翾  阅读(1483)  评论(1)  编辑  收藏  举报