隨機爆炸文字

我正在使用以下代碼來爆炸文本中的值。我分開的文本框字符串單獨的字符，但是當我爆炸整個div爆炸。幫我隨機爆炸文字

var explode=$("#text").val(); 
var len=explode.length; 
var text=""; 
for(var i = 0;i < len; i++) 
{ 
    var res=explode.charAt(i); 
    $("#div").append("<span id="+i+" >"+res+"</span>"); 
} 
for(var j=0; j < len; j++) 
{ 
    $("#"+j).each(function(i){ 
     $("#"+j).css('position','relative'); 
     $("#"+j).animate({left:'250px',opacity:'0.5',top:'250px',bottom:'500px'}); 
    }); 
}

來源

2014-06-20 jerome

它幫助，如果你把一個演示例如在jsfiddle中。 – winkbrace

而事件是？ keyup/keydown，還是？ – sinisake

我不認爲這是導致你說錯的問題，但ID attrs應該以A-Z開頭。所以你的跨度ID是無效的。 – JAAulde

據我瞭解術語，「爆炸，」你想要的字符去在各個方向飛行。如果我正確理解你的願望，那麼正如我在我的評論中所說的那樣，主要問題在於你幾乎同時在每個字符跨度上運行相同的動畫。您需要隨機選擇一些值，以便爲每個單獨的字符跨度設置動畫。

下面是一些代碼，應該是你一個小更高效，並使用隨機值的動畫：

var explode = $('#explode_text').val(), 
    container = $('#explode_container'), 
    getRandomInt, 
    len = explode.length, 
    i; 

/* 
* From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random 
*/ 
function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

for (i = 0; i < len; i += 1) { 
    container.append(
     $('<span />').text(explode.charAt(i)) 
    ); 
} 

container.children('span').each(function() { 
    $(this) 
     .css('position','relative') 
     .animate({ 
      opacity: '0.5', 
      left: getRandomInt(0, 250) +'px', 
      top: getRandomInt(0, 250) +'px', 
      bottom: getRandomInt(0, 500) +'px' 
     }); 
});

的jsfiddle演示：http://jsfiddle.net/M8EP8/1/

來源

2014-06-20 12:44:18 JAAulde

謝謝，它的工作.. – jerome

，但我不明白abour math.floor，math.random函數。你能否解釋發生了什麼？ – jerome

JavaScript的'Math.random（）'有點奇怪，因爲它返回一個0到1之間的小數。通過用最小和最大的方式來處理返回值，並將其舍入到一個整數，我們得到一個在我們想要的範圍內可行的價值。 – JAAulde

隨機爆炸文字

回答

相關問題