jQuery输入框打字文字飞逝的动画特效

一款jQuery输入框打字文字飞逝的动画特效，目前仅支持输入大写或小写的英文字母时有文字飞逝的特效，感兴趣的童鞋可以修改成支持中文飞逝的特效，总之，喜欢的童鞋请收下吧。

分类：文字特效 > 文字动画难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，结构还是比较简单的，div容器里面放入了一个form表单，代码如下：

<div class="flex_container">
  <h3>请输入字母查看效果</h3>
  <form>
    <div class="input_wrap">
      <input type="text" placeholder="英文字母大写或小写" />
      <div class="after"></div>
    </div>
  </form>
</div>

页面的底部，需引入jQuery库，并设置好字母输入时的特效，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  $.fn.animChars = function(options) {
    var params = $.extend(
      {
        duration: 1,
        upperLimit: 150,
        sizeInterval: [15, 80]
      },
      options
    );
    $(this).keypress(function(e) {
      //console.log(this.selectionStart)
      var rand = getRandomInt(1, 9);
      var randP = Math.floor(Math.random() * 10);
      randP < 5 ? (randP = rand) : (randP = rand - rand * 2);

      var c = String.fromCharCode(e.which);
      //console.log(c);
      if (c.charCodeAt(0) <= 90 && c == c.toUpperCase()){//charCodeAt(0) > 96 为小写 charCodeAt(0) <= 90 为大写
      	c = c.toUpperCase();
      }else{
      	c = c.toLowerCase();
      }
      $(this).parent().append("<span class='cl" + rand + "'>" + c + "</span>");

      $(this)
        .parent()
        .find("span.cl" + rand + "")
        .css({
          left: getRandomInt(0, 90) + "%",
          "font-size": getRandomInt(
            params.sizeInterval[0],
            params.sizeInterval[1]
          )
        })
        .fadeIn(100, function() {
          $(this)
            .css({
              "margin-bottom": getRandomInt(
                params.upperLimit - params.upperLimit / 2
                  ? params.upperLimit / 2
                  : 0,
                params.upperLimit
              ),
              "margin-left": randP * 10
            })
            .fadeOut(params.duration * 1000, function() {
              $(this).remove();
            });
        });
    });
  };
})(jQuery);

$(document).ready(function() {
  $("input").animChars({
    duration: 0.8,
    upperLimit: 200,
    sizeInterval: [15, 80]
  });
});
</script>