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

原文:http://www.cnblogs.com/coffeedeveloper/p/3852894.html#2989479

项目网站:http://coffeedeveloper.github.io/typing.js/index.html

最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑。需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML。苦思猛想数小时后,果断用动态生成DOM的方法实现了整个效果。

typing.js的打印效果甚至能够支持表格、按钮、表单,只要你页面能够呈现出来的,都可以以一种动态输出的感觉打印出来! 强烈推荐观看完整DEMO

我在网上查了一下,应该目前是没有一个插件是和typing.js效果一致的!

浏览器兼容性方面已经测试通过(IE8-11、chrome、firefox、safari),由于虚拟机的镜像丢失了,暂时没有测试IE6-7。目测是没有任何问题的。

低版本的IE需要手动引入es5-shim文件

<!--[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事件中执行相关代码。

<script>
  var typing = new Typing({
    source: document.getElementById(‘source‘),
    output: document.getElementById(‘output‘),
    delay: 80
  });
  typing.start();
</script>
时间: 2024-11-03 21:44:51

最牛的打字效果JS插件 typing.js的相关文章

一款模拟CSS3动画的js插件-move.js

Move.js是一款简单小巧的模拟CSS3动画的js插件.该插件可以完成CSS3的各种动画效果:移动.变形.倾斜.背景色渐变.旋转等.并且可以在动画中使用各种easing效果. 类似插件可参考:可替代CSS3 transition和transform的jQuery插件. 在线演示:http://www.htmleaf.com/Demo/201501281292.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/20150128129

可操纵网页URL地址的js插件-url.js

url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符串或是一个对象形式. 在线演示:http://www.htmleaf.com/Demo/201503181541.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503181540.html

分享一个打字效果的插件 基于zepto

引入顺序 var str = "欢迎您来到这里,就到下一行了.说好的可以一下一下的呢.还是说..."; var arr = str.split(''); 接下来引入  function() 1 $.fn.consFont = function (arr,speed,split){ 2 var count = 0; 3 var length = arr.length; 4 var timer; 5 var _this = $(this); 6 if(count===length){ 7

最近用到的js插件:TouchSlide.js,LazyLoad.js

最近用到的几个比较好用的js的插件,一个是供延迟加载的lazyLoad.js,另外一个是提供滚动播放效果的TouchSlide.js 附上用法传送门: lazyLoad(只加载视野范围内的图片):http://www.cnblogs.com/ahjesus/archive/2010/10/09/1998642.html TouchSlide(手机版本,不依赖其他的js库):http://www.superslide2.com/TouchSlide/howToUse.html

JS 插件 fastclick.js 解决手机端click点击延迟

fastclick.js 什么用 加快手机的反映速度,测试是可以用的,很快... fastclick的js FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟.它支持以下浏览器:Mobile Safari on iOS 3 and upwardsChrome on iOS 5 and upwardsChrome on Android (ICS)Opera Mobile 11.5 and upwardsAndroid B

如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

js实现打字效果

<!DOCTYPE html>      <html>       <head>           <meta charset='utf-8'>           <title>js typing</title>       </head>          <body>           <div id='text'></div>              <script&

当下最流行的点击效果插件 waves.js

我第一次看到这个效果是 Google Design 也就是谷歌的设计团队博客用到了这个效果 , 当时的第一感觉就是 擦 ,google就是牛逼, 一个按钮点击也要酷到不要不要的了 第二次看到这个效果是一个 国外的优秀后台模板上面 ,这次我不会在放过了 , 使劲的扒源代码 ,最终让我发现了一个隐藏很深的一款插件 waves.js,口说无凭,我整理了个demo可以在线看效果 http://developer.qietu.com/docs/waves.js/ 附下载地址http://www.qietu

jQuery模仿人类打字效果插件typetype

typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢的朋友研究下吧,下面来看下它的使用方法: 引入核心文件 1 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 2 <script type="text/j