最牛的打字效果JS插件typing.js

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-29 16:44:45　-　阅:　-　评:0　-　积分:0

前几日在网上无意间看到一个不错的打字效果插件，感觉效果还不错。具体是什么效果呢？这种效果类似几年前电视上打文字广告时的效果，来放一张截图：
最牛的打字效果JS插件typing
截图的话并不能看出有多大的效果，下面附上源码，来一起看效果吧。

洒家对源码稍微做了下修改，延长了加载的时间，这里设置5s后再进行加载，这样更方便亲看效果。

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最牛的打字效果JS插件typing---艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="打字特效JS插件,JSt特效插件,typing.js">
<style type="text/css">
*{margin:0; padding:0}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.typing-cursor,.typing-cursor-black,.typing-cursor-white{opacity:1;font-weight: bold;-webkit-animation: blink 0.7s infinite;animation: blink 0.7s infinite;}
.typing-cursor,.typing-cursor-black{color:#000}
.typing-cursor-white{color:#fff}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"></script>
<![endif]-->
</head>
<body>
<h2 id="source">
前几日在网上看到一个不错的打字效果插件，感觉还不错，于是便拿出来与大家分享。<br />
请看这里，5s后会自动打印您看到的这行文字<br />
怎么样，效果还不错吧？
</h2>
<br />
<br />
<br />
<h2 id="output-wrap">
<span id="output"></span>
<span class="typing-cursor-black">|</span>
</h2>
<script type="text/javascript" src="/d/file/jquery/2014-07-29/typing.js"></script>
<script>
/*函数封装，便于后面调用*/
function typ(){
var typing = new Typing({source: document.getElementById('source'),
output: document.getElementById('output'),
delay: 120});
typing.start();
};
setTimeout(typ,5000);/*5s后进行加载*/
</script>
</body>
</html>

怎么样，效果还不错吧。当然了，这么牛b的插件，暂时洒家还是写不出来的，不过洒家会分享出来给小伙伴们用。

插件原文地址：http://www.cnblogs.com/coffeedeveloper/p/3852894.html以下为相关引用

typing.js的打印效果甚至能够支持表格、按钮、表单，只要你页面能够呈现出来的，都可以以一种动态输出的感觉打印出来！强烈推荐观看完整DEMO我在网上查了一下，应该目前是没有一个插件是和typing.js效果一致的！

浏览器兼容性方面已经测试通过（IE8-11、chrome、firefox、safari），由于虚拟机的镜像丢失了，暂时没有测试IE6-7。目测是没有任何问题的。低版本的IE需要手动引入es5-shim文件

es5-shim.js/p>

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"></script>
<![endif]-->

typing.js使用非常简单，在页面底部或者Ready事件中执行相关代码。

typing.js

<script>
var typing = new Typing({
source: document.getElementById('source'),
output: document.getElementById('output'),
delay: 80
});
typing.start();
</script>

在优化代码后，已经放在github上，并建立了相关项目页面。

项目主页：http://coffeedeveloper.github.io/typing.js/
完整DEMO：http://coffeedeveloper.github.io/typing.js/demo.html
带闪烁效果的代码书写DEMO：http://coffeedeveloper.github.io/typing.js/demo2.html

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-07-29/180.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！