打字机效果与jQuery

编辑：我没有真正问我在原来的问题中应该提出的所有问题.为了帮助寻找类似答案的人更容易,这是最终的问题：

如何使用闪烁的光标在语句结尾处暂停打印机效果,擦除语句并写入新的语句？

在下面查看Yoshi的回答.正是这样…

解决方法

插入：

(function ($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void
  function typeString($target,str,cursor,delay,cb) {
    $target.html(function (_,html) {
      return html + str[cursor];
    });

    if (cursor < str.length - 1) {
      setTimeout(function () {
        typeString($target,cursor + 1,cb);
      },delay);
    }
    else {
      cb();
    }
  }

  // clears the string
  //
  // @param jQuery $target
  // @param Numeric delay
  // @param Function cb
  // @return void
  function deleteString($target,cb) {
    var length;

    $target.html(function (_,html) {
      length = html.length;
      return html.substr(0,length - 1);
    });

    if (length > 1) {
      setTimeout(function () {
        deleteString($target,delay);
    }
    else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function (opts) {
      var settings = $.extend({},$.teletype.defaults,opts);

      return $(this).each(function () {
        (function loop($tar,idx) {
          // type
          typeString($tar,settings.text[idx],settings.delay,function () {
            // delete
            setTimeout(function () {
              deleteString($tar,function () {
                loop($tar,(idx + 1) % settings.text.length);
              });
            },settings.pause);
          });

        }($(this),0));
      });
    }
  });

  // plugin defaults  
  $.extend({
    teletype: {
      defaults: {
        delay: 100,pause: 5000,text: []
      }
    }
  });
}(jQuery));

HTML：

<span id="target"></span>
<span id="cursor"></span> <!-- used for the blinking cursor effect -->

在里面：

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet,consetetur sadipscing elitr,','sed diam nonumy eirmod tempor invidunt ut labore et dolore','magna aliquyam erat,sed diam voluptua. At vero eos et','accusam et justo duo dolores et ea rebum. Stet clita kasd','gubergren,no sea takimata sanctus est Lorem ipsum dolor sit','amet. Lorem ipsum dolor sit amet,sed diam voluptua. At vero eos et accusam','et justo duo dolores et ea rebum. Stet clita kasd gubergren,'no sea takimata sanctus est Lorem ipsum dolor sit amet.'
  ]
});

$('#cursor').teletype({
  text: ['_',' '],delay: 0,pause: 500
});

打字机效果与jQuery

解决方法

猜你在找的jQuery相关文章