Question

如何使用jQuery / javascript创建文本类型编写器效果？

我试过google，找到了jtypewritter，但jQuery Plugin jtypewriter上的演示页面无法正常工作/打开。

link：http://archive.plugins.jquery.com/project/jTypeWriter

project's home page也无效。

问题：

如何使用jQuery或java脚本创建文本类型编写器效果？
有没有办法通过任何其他技巧获得相同的效果？

Answer 1

这是如何使用jQuery创建文本打字机效果的示例

演示：http://jsbin.com/araget/5/

<强>插件：

(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, str, cursor + 1, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

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

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

    if (length > 1) {
      setTimeout(function () {
        deleteString($target, delay, cb);
      }, 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], 0, settings.delay, function () {
            // delete
            setTimeout(function () {
              deleteString($tar, settings.delay, 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, 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.'
  ]
});

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

Answer 2

我假设text type writer effect，您的意思是Microsoft PowerPoint演示幻灯片动画中的那个：）

即。随机彩色文字从左到右显示有一点延迟。

你可以创建自己的。我看到这个非常简单（和丑陋）的演示：

var data="this is the data to be shown in effect";
var index=0;

var cursor="<span id='cursor'>_</span>";
$('.content').append(cursor);

function test(){
    //Clear the interval once entire characters are processed 
    if(index>=data.length-1){
        clearInterval(T);
    }

    //Generate random color
    var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';

    //wrap each of the characters in a span tag with the currently generated 
    //random style color. 
    _span = '<span style="color:'+hue+'">'+data[index]+'</span>';

    //and append the span just before the cursor
    $('#cursor').before(_span);
    index++;
}

//call the function repeatedly, till all the characters are processed, hence
//setInterval(code,duration) 
var T=setInterval("test()",200);

请参阅此FIDDLE

如果要增加动画效果，只需缩小setInterval中的Interval，反之亦然。此外，通过原型设计，你可以使它变得更加优雅。

它应该给你一个想法。

重新启动。只需这样做，而不是清除间隔

if(index>=data.length-1){
        $('span').not('#cursor').remove();
        index=0;
}

fiddle

如何用jQuery / javascript创建文本打字机效果？

2 个答案: