html代码

<div id="box">
<div id="content">
<div id="code">
如果你认识以前的我,那么你会原谅现在的我。
</div>
</div>
</div>

css代码

body{margin:;padding:;background:#ffe;font-size:12px;overflow:auto}
#mainDiv{width:500px;height:100%;margin: 0 auto;margin-top: 100px;}
#code{float:left;width:440px;height:400px;color:#333;font-size:12px;margin:200px 0 0 200px;}

js代码

<script type="text/javascript">
  (function($) {
    $.fn.typewriter = function() {
      this.each(function() {
      var $ele = $(this), str = $ele.html(), progress = 0;
      $ele.html('');
      var timer = setInterval(function() {
      var current = str.substr(progress, 1);
      if (current == '<') {
        progress = str.indexOf('>', progress) + 1;
      } else {
        progress++;
      }
      $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
      //if (progress >= str.length) {
      //clearInterval(timer);
      //}
    }, 100);
  });
  return this;
  };
  })(jQuery);
  $(function(){
    $("#code").typewriter();
  })
</script>

jquery打字机效果的更多相关文章

  1. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  2. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  3. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  4. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  5. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  6. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  7. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  8. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

  9. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. Git add 常见用法

        Git add   git add [参数]  [--] <路径> //作用就是将我们需要提交的代码从工作区添加到暂存区,就是告诉git系统,我们要提交哪些文件,之后就可以使用gi ...

  2. mongoose index

    1. 当应用程序启动时,Mongoose会自动为模式中的每个定义的索引调用ensureIndex. 虽然很好用于开发,但建议在生产中禁用此行为,因为索引创建可能会导致显着的性能影响. 通过将模式的au ...

  3. Java基础之在窗口中绘图——绘制星星(StarApplet 1)

    Applet程序. 可以把更复杂的几何形状定义为GeneralPath类型的对象.GeneralPath可以是直线.Quad2D曲线和Cubic2D曲线的结合体,甚至可以包含其他GeneralPath ...

  4. JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么?

    JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么? 联系: JSP 是 Servlet 技术的扩展,本质上是 Servlet 的简易方式,更强调应用的外表表达. JSP编译后是& ...

  5. 十七、Java基础---------集合框架之Map

    前两篇文章中介绍了Collection框架,今天来介绍一下Map集合,并用综合事例来演示. Map<K,V> Map<K,V>:Map存储的是键值对形式的元素,它的每一个元素, ...

  6. Java:String和Date、Timestamp之间的转

    Java:String和Date.Timestamp之间的转 一.String与Date(java.util.Date)互转 1.1 String -> Date String dateStr  ...

  7. 初识Python第三天(一)

    一.set集合 set是一个无序且不重复的元素集合 print(dir(set)) #['__and__', '__class__', '__contains__', '__delattr__', ' ...

  8. Tomcat常见的内存溢出,以及解决方法

    一.常见的三种内存溢出错误: 1.java.lang.OutOfMemoryError:java heap space    ====JVM Heap(堆)溢出 JVM再启动的时候回自动设置JVM H ...

  9. miniUI datagrid 获取序号

    获取每一个row以后,其中的row._index字段和页面上显示的序号虽然看起来一样, 但是实际上不是同一个东西,如果用客户端排序模式,排序后,row._index和页面显示的序号就对不上了. 正确的 ...

  10. AS3语言注意事项汇总

    1. 在IE中,主DisplayObject加入stage后,可能其大小还是0,这时可以通过监听resize信息,在主DisplayObject获得正确的大小后,运行主要程序.需要注意的是在这个过程中 ...