使用格式輸入文字效果：跳過HTML標籤，但不要刪除

我試圖提供一種獲得鍵入文字效果的簡單方法，但也可以允許使用HTML標籤。我有一些可行的代碼，但我發現標籤被認爲是文本的一部分。使用格式輸入文字效果：跳過HTML標籤，但不要刪除

例如，如果該文本是"Anyone is <b>awesome</b>，我看到當它到達加粗部分如下：

< 
<b 
<b> 
<b>a 
<b>aw 
<b>awe 
<b>awes 
<b>aweso 
<b>awesom 
<b>awesome 
<b>awesome< 
<b>awesome</ 
<b>awesome</b 
<b>awesome</b>

我怎麼能跳過HTML節點，而不從字符串刪除它們？我想保持格式化工作。

這是我到目前爲止已經完成：

<div id="foo"></div>

$.fn.typer = function (text, options) { 
    options = $.extend({}, { 
     delay: 1000, 
     duration: 1000, 
     easing: 'linear', 
     endless: false 
    }, options); 
    var elem = $(this); 
    (function loop(i) { 
     var e = typeof text === 'string' ? text : text[i]; 
     // strip html tags, might be helpful 
     // e.replace(/(<.*?>)/ig,"") 
     $({len: 0}).delay(options.delay).animate({len: e.length}, { 
      duration: options.duration, 
      easing: options.easing, 
      step: function (now) { 
       var pos = Math.ceil(now), 
        char = e.substr(pos, 0); 
       elem.html(e.substr(0, pos)); 
      }, 
      complete: function() { 
       i++; 
       if (i === text.length && !options.endless) { 
        return; 
       } else if (i === text.length) { 
        i = 0; 
       } 
       loop(i); 
      } 
     }); 
    })(0); 
}; 

$('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</>!', 'Foo bar.']);

工作演示：

http://jsfiddle.net/ARTsinn/RED9H/2/

更新

Got it!

example沒有jQuery的動畫功能。

如果您有任何改進，請在此分享！

來源

2013-02-05 yckart

要從e剝去標籤，使用：

e = $(e).text();

這假定e爲已知含有HTML開始。如果它可能包含純文本，它包裝在一個DIV第一：

e = $('<div>'+e+'</div>').text();

否則，jQuery將試圖解釋它作爲一個選擇。

來源

2013-02-05 18:25:11 Barmar

將標籤剝離;） – yckart

不知道如何對其進行編碼，但我認爲您需要遍歷'$（e）'的DOM，直到到達文本節點。然後迭代文本節點的字符，將它們添加到'elem.text（）' – Barmar

@yckart您的編輯是不必要的。該變量已在OP的原始函數中聲明，這只是在同一範圍內重新分配變量，並且不需要另一個'var'聲明。 – Barmar

有點像什麼「讓我爲你而冰！」呢？ Example

可以下載打字效果的Javascript - 但首先檢查許可條款。 http://letmebingthatforyou.com/scripts/lmbtfy.js似乎正在做大部分工作。

來源

2013-02-05 18:25:01

他的問題不在於打字效果，而是在打字前打掃輸入。 – Barmar

@Barmar是的，你是對的！ – yckart

使用格式輸入文字效果：跳過HTML標籤，但不要刪除

回答

相關問題