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

标签: Javascript javascript 动画 | 发表时间:2012-09-05 14:52 | 作者:terry
出处:http://www.qianduan.net

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

在线演示  本地下载

今天我们将介绍一个来自 script-tutorialsjavascript教程,在这个教程中,我们将介绍如何使用 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 = '&lt;span&gt;';
    var iCurInk = 0;
    var sCurCaret = '';
    var sCaret = "&amp;nbsp;&lt;img src="pen.gif" style='position:absolute' /&gt;";
 
    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 == '&lt;') { // pass tags
            var iPos = sText.indexOf('&gt;', iCurChar);
            sChar = sText.substring(iCurChar, iPos + 1);
            iCurChar = iPos;
        } else if (sChar == '&amp;') { // 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 &gt; 5) {
            sCurCaret = sCaret;
        }
 
        // expenditure of ink
        if (sChar == ' ') {
            iCurInk += iSpeedInk;
            sChar = '&lt;/span&gt;&lt;span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')"&gt;' + sChar;
        }
 
        if (document.getElementById('inkwell2').style.visibility == 'visible') {
            sCurCaret = sCaret;
            document.getElementById('inkwell2').style.visibility = 'hidden';
            sChar = '&lt;/span&gt;&lt;span style="color:RGB(0,0,0)"&gt;' + sChar;
        }
 
        // refresh Ink
        if (iCurInk &gt; 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 &lt; sText.length) {
            setTimeout(doStep, 20 + iDelay);
        }
    }
 
    doStep();
};

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

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

相关 [javascript 开发 动画] 推荐:

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

- - 前端观察
在线演示  本地下载. 今天我们将介绍一个来自 script-tutorials的 javascript教程,在这个教程中,我们将介绍如何使用 javascript来生成一个动画的文字书写效果. Grant was not|||||||was very happy.

He took the letter to a shop in London where they bought and sold old papers.

JavaScript开发规范要求

- - 博客 - 伯乐在线
来源: webflash 的博客. 作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题. 本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了. 现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.

10个css3/javascript动画插件/框架

- - ria之家--RIA三部曲:jquery、ext、flex
jquery的一个用的人比较多的动画插件,非常的易用,效果也非常全面. 应该是目前针对transform最为全面的动画库,特点支持3D动画特性:. 非常牛逼的动画效果,文档和demo都很详细,虽然用于实战的场景不多(基于canvas的动画),不过依旧推荐认真看下. 相当不错的小动画库,能够产生大部分css3动画效果,关键是API非常易于理解,比如下面的代码:.

使用JavaScript和Canvas开发游戏(一)

- iVane - 为之漫笔
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 4、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

15款很棒的 JavaScript 开发工具

- jiwei - cnBeta.COM
在开发中,借助得力的工具可以事半功倍. 今天,这篇文章向大家分享最新收集的15款非常有用的 JavaScript 开发工具.

使用JavaScript和Canvas开发游戏(三)

- weslleywang - 为之漫笔
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

使用JavaScript和Canvas开发游戏(四)

- weslleywang - 为之漫笔
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 6、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

使用JavaScript和Canvas开发游戏(一)

- Alex - HTML5研究小组
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx. 3、基于Canvas的高级图像操作. 4、通过Canvas实现视差滚动.

JavaScript最佳开发工具集合

- MAGI-CASPER/Peter Pan - 伯乐在线 -博客
  注:此文由敏捷翻译 - 关关编译自 Joe Stagner 近日分享的博文. 本文只是JavaScript的工具集合,如需书籍资源,《你得学JavaScript》这篇文章已有推荐.   我最近做了很多客户端OG开发,也计划做更多. HTML5、JavaScript 和 CSS.   我正在做一个工作计时器,所以我在寻找一个JS测试框架,故我自己给不同的JavaScript工具做了一个列表.