javascript - 叠加的最佳方式

Question

有没有办法选择一个随机的十六进制选择器，但只针对某些颜色？

我正在尝试重新创建以下图像，但实际上是在对其进行编码。

Image

到目前为止，我已经管理了以下代码。

HTML

<div id="group">
<div class="sub red panel">

</div><!--sub-->
<div class="sub orange">

</div><!--sub-->
<div class="sub yellow">

</div><!--sub-->

CSS

body{
    background:#333;
}
#group{
    position:relative;
    float:left;
    width:500px;
   height:300px;
}
.sub{position:relative; float:left; width:96px;}

.pxl{width:7px; position:relative;float:left; height:7px; margin:1px 1px 0 0;}
.red div{background:#f00;}
.orange div{background:#f26607;}
.yellow div{background:#f5e70b;}

js

var pageLimit=288;

 for(var i = 1; i <= pageLimit; i++) {
  $('.sub').append('<div class="pxl"></div>' )
 }

var randint = function ( ceiling ) {
    return Math.floor( Math.random() * ceiling );
};

setTimeout(function () {
    $( '.pxl' ).each(function () {
        $( this ).delay( randint(5000) ).fadeTo( randint(10000), 0 );
    });
}, 5000 );

非常感谢任何帮助 jsFiddle

Answer 1

你可以尝试这样的事情:

实例

http://jsfiddle.net/GHsBn/8/

片段示例

var col;
    $('.red .pxl').each(function(i, e) {
            col = 'rgb(255,' + (Math.floor(Math.random() * 150)) + ',' + (Math.floor(Math.random() * 150)) + ')';
            $(e).css('background', col);
        });

它遍历红色类中的每个像素，并构建随机背景色。

您可以尝试使用随机值和范围来获得您想要的结果。 ;)