JavaScript的文字效果

我想創建一個JS插件，它將採取一個字符串作爲輸入，並且字符串將緩慢地丟失字符，一次從一個端點，並最終消失（字符串長度= 0）。JavaScript的文字效果

這是迄今爲止我所編寫的代碼：

var start=0; 
var finish=0; 

$.fn.scramble = function(){ 
    $(this).each(function(){ 
     $element = $(this); 
     $inputString = $element.text().trim(); 
     finish = $inputString.length; 
     vanish($inputString.substring(start++, finish--)); 
    }) 
    } 

vanish = function($inputString){ 
    console.log($inputString); 
    $stringLength = $inputString.length; 
    console.log($stringLength); 
    if($stringLength <= 0) 
    return 0; 
    setTimeout(function(){ 
    vanish($inputString.substring(start++, finish--)); 
    }, 1000); 
}

我給它一個樣本輸入，「樣品」。預期的輸出是「充足的」，「mpl」，「p」。但相反，它返回「充足」，「ple」。

當然，我在這裏做錯了事，但我無法弄清楚。請幫助:)

這裏有一個小提琴設置：http://jsfiddle.net/v6KKM/

來源

2014-04-20 psyc0der

http://jsfiddle.net/v6KKM/3/ ;-) –

哦！我的壞。那太傻了。非常感謝你:) @MartyIX – psyc0der

考慮更改finish = $inputString.length;到finish = $inputString.length - 1;

來源

2014-04-20 06:30:27

但子字符串函數將從開始索引返回到完成索引1。如果我做了'finish = $ inputString.length - 1;'，它會自動省略我不想發生的最後一個字母 – psyc0der

$.fn.scramble = function(){ 
    $(this).each(function(){ 
     $element = $(this); 
     $inputString = $element.text().trim(); 
     finish = $inputString.length; 
     vanish($inputString.slice(1, -1)); 
    }) 
    } 

vanish = function($inputString){ 
    console.log($inputString); 
    $stringLength = $inputString.length; 
    // console.log($stringLength); 
    if($stringLength <= 0) 
    return 0; 
    setTimeout(function(){ 
    vanish($inputString.slice(1, -1)); 
    }, 1000); 
}

也許這你想要什麼。您可以比較'substring'和'slice'。我希望這有助於。

來源

2014-04-20 06:47:41

可以使用數組和遞歸函數獲得更簡單的方法相同的結果
Fiddle 你需要的所有代碼是

<script type="text/javascript"> 
$(document).ready(function(){ 
    $.fn.scramble = function(){ 
     var str=$(this).text() 
     function recursor(str){ 
      newS='' 
      if(str.length>=3){ 
       var arr=str.split('') 
       arr.pop() 
       arr.shift() 
       for(a=0;a<arr.length;a++){newS+=arr[a]} 
       $('#text').append(' '+newS) 
       setTimeout(function() { recursor(newS) },1000) 
      } 
     } 
     recursor(str) 
    } 
    $('#sc').click(function(){ 
     $('#text').scramble() 
    }) 
}) 
</script>

或（brobably更好），你CA使用子Fiddle2，你會獲得一個更緊湊的代碼

<script type="text/javascript"> 
$(document).ready(function(){ 
    $.fn.scramble = function(){ 
     var str=$(this).text() 
     function recursor(str){ 
      if(str.length>=3){ 
       var result = str.substring(1, str.length-1); 
       $('#text').append(' '+result) 
       setTimeout(function() { recursor(result) },1000) 
      } 
     } 
     recursor(str) 
    } 
    $('#sc').click(function(){ 
     $('#text').scramble() 
    }) 
}) 
</script>

這種解決方案不能滿足您的需求，我讓你們失去的時間表示歉意。

來源

2014-04-20 13:55:56 Devima

JavaScript的文字效果

回答

相關問題