jquery打字机效果

html代码

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

css代码

body{margin:0;padding:0;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>
posted @ 2015-12-07 16:14  leestar  阅读(759)  评论(0编辑  收藏  举报