-1

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

我试图用谷歌搜索，发现 jtypewritter，但给出的演示页面jQuery Plugin jtypewriter无法正常工作/打开。

链接： http: //archive.plugins.jquery.com/project/jTypeWriter

project's home page也不工作。

问题 ：

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

2 回答 2

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
});
于 2013-04-20T08:28:11.870 回答
1

我假设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);

看到这个小提琴

如果要增加动画效果，只需在 setInterval 中减小 Interval 即可，反之亦然。此外，您可以通过原型制作使其更加优雅。

它应该给你一个想法。

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

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

小提琴

于 2013-04-20T08:49:24.737 回答