我有大量的 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 都有自己的位置,有一个系统,但每次都不一样。