Question

使用这个 - random position of divs in javascript作为起点我试图随机定位包含数组文本的div。

当前代码（主要是在链接帖子中复制Ken Redler的答案）：

(function makeDiv(){
    var divsize = 200;
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);

    //set up the array to hold the random div content
    var boastsText = [];
    var i = 0;
    $(".boast ul li").each(function() { boastsText.push($(this).text()) });

    $newdiv = $('<div/>').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'color': color
    });

    // make position sensitive to size and document's width
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).html(boastsText[i]).appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
      $(this).remove();
      makeDiv(); 
    }); 
})();

我唯一真正添加的是设置数组var boastsText = []和填充该数组的each函数。

我遇到的问题是我需要遍历数组，因此创建的每个新div都使用下一个项目作为内容，即div 1使用数组项0，div 2使用项1等...直到它到达结尾数组，然后再次启动该过程。

Answer 1

我已经修改了你的脚本以使用递归函数来迭代数组并保持延迟和fadeIn / Out你有：

(function() {
    //set up the array to hold the random div content
    var boastsText = [];
    $(".boast ul li").each(function () {
        boastsText.push($(this).text());
    });


    function makeDiv(i){
        var divsize = 200;
        var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);

        var $newdiv = $('<div/>').css({
            'width':divsize+'px',
            'height':divsize+'px',
            'color': color
        });
        // make position sensitive to size and document's width
        var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
        var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

        $newdiv.css({
            'position':'absolute',
            'left':posx+'px',
            'top':posy+'px',
            'display':'none'
        }).html(boastsText[i]).appendTo('body').fadeIn(100).fadeOut(500, function() {
          $(this).remove();
          if (i === boastsText.length) return;
          makeDiv(++i); 
        }); 
    }

    //Start the recursion
    makeDiv(0);

}());

随机定位div中的数组值

1 个答案: