随机爆炸文字

我正在使用以下代码来爆炸文本中的值。我分开的文本框字符串单独的字符，但是当我爆炸整个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

随机爆炸文字

回答

相关问题