覆盖的最佳方法

时间:2012-07-03 14:36:28

标签: javascript jquery html css

有没有办法选择随机十六进制选择器,但只能选择某些颜色?

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

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

2 个答案:

答案 0 :(得分: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);
        });

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

您可以使用随机值和范围来获得所需的结果。 ;)

答案 1 :(得分:0)

你可以使用它并删除数组中的一些字符串,这样它只返回你想要的颜色:http://paulirish.com/2009/random-hex-color-code-snippets/