0

我有大量的 div 随机附加到正文中:

for(var i = 0; i < 1020; i++) {
    var randomleft = Math.floor(Math.random()*Math.floor(Math.random()*1500)),
    randomtop = Math.floor(Math.random()*Math.floor(Math.random()*1500));
    allCubes += '<div id="cube'+i+'" class="cube" style="position: absolute; left: '+randomleft+'px; top: '+randomtop+'px; width: 7px; height: 7px; z-index: -1;"></div>';
}  
    $('body').append(allCubes);

    for (var i = 0; i < 1020; i++) {
       cubes['cube' + i] = $('#cube' + i)
    }

他们我有一个功能,可以为与一个 div 相关的每个 div 设置动画#fixed

var row = 9,        
        t = 0;
        $fixed.css({'background-color': '#000', left: '25%', top: '35%'});
    var fixedOffs = $fixed.offset();


    cubes[0].transition({ top: fixedOffs.top+row, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[1].transition({ top: fixedOffs.top+row*2, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[2].transition({ top: fixedOffs.top+row*3, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
    cubes[3].transition({ top: fixedOffs.top+row*4, left: fixedOffs.left+row, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
      // until cubes[1019]...

是的,我一直在为每个 div 写下所有的数字和坐标。我正在使用 css3 转换(transit.js,具有类似 的语法.animate())来使其尽可能高效。但不幸的是,它真的很滞后。有谁知道如何以我想要的方式处理这些 div 负载。

注意:每个 div 都有自己的位置,有一个系统,但每次都不一样。

4

0 回答 0