jQuery实现网页打字机特效

网上找到好多jq实现打字机特效的代码，不过很多感觉整理的不太好，下面这个代码可以完美实现打字机效果，而且使用起来十分简单。

原作者：蓝叶    主页：lanyes.org     这里只是做了搬运+使用方法的详细介绍

$.fn.typing = function(n){
  // 默认选项
  var options = {
    speed  : 100,    
    range  : 100,    
    repeat  : true,    
    flashback : true,  
    flicker  : true    
  }
  $.extend(options,n);
  
  var _this = $(this);
  var str = $(this).text().split(''); //分割字符串
  var index = 0; // 当前索引
  var direction = 1; // 1为正向，-1为反方向
  // 将分割后的字符串装入数组
  $(str).each(function(i,k){
    str[i] = (str[i-1] ? str[i-1] : '') + str[i];
  });
  // 设置边框模拟光标
  _this.css('border-right','0');
  
  // 启动定时器，开启打字效果
  setTimeout(init,options.speed);
  
  // 初始化函数
  function init(){
    _this.text(str[index]);
    
    // 如果运行到最后,且开启了重复
    if(index >= (str.length-1) && options.repeat){
      // 如果设置了倒叙则变换方向
      if(options.flashback){
        direction = -1; // 变换方向为负方向
      }else{
        index = 0;
      }
      // 如果设置了闪烁则启用闪烁效果
      if(options.flicker){
        _this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);
      }
      setTimeout(init,2000);
    
    // 如果运行到最后但未开启重复
    }else if( index >= (str.length-1) && !options.repeat ){
      // 如果设置了闪烁则启用闪烁效果
      if(options.flicker){
        _this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);
      }
      // 移除光标样式
      _this.css('border-right','');
    
    // 如果倒回到开始
    }else if(index < 0 ){
      index = 0;
      direction = 1; // 变换方向为正方向
      setTimeout(init,Math.random()*options.range + options.speed);
    
    }else{
      setTimeout(init,Math.random()*options.range + options.speed);
    }
    
    index += direction;
  }
};

使用方法：

$(document).ready(function(){$("控件").typing({speed:速度,repeat:是否重复,flashback:是否倒叙返回,flicker:是否闪烁});})

例如：

$(document).ready(function(){$(".text").typing({speed:100,repeat:true,flashback:false,flicker:false});})

即可使class为text的控件出现打字机的效果。