如何用jQuery/javascript創建文本類型編寫器效果？

Question

如何用jQuery/javascript創建文本類型編寫器效果？

我試過Google，發現jtypewritter， 但是jQuery Plugin jtypewriter上的Demo頁面沒有正常工作/打開。

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

project's home page也不能正常工作。

問題：

1. 如何創建與jQuery或Java腳本 文本類型作家的影響？
2. 有沒有什麼辦法通過其他技巧來獲得相同的效果？

Answer 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); 

看到這個FIDDLE

如果你想增加動畫效果，只需減少setInterval的時間間隔，反之亦然。此外，通過原型設計，您可以使其更加優雅。

它應該給你一個想法。

用於重新啓動。簡單地做到這一點，而不是清除間隔

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

fiddle

Answer 2

這是如何使用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 
});