2012-07-03 76 views
2

有沒有辦法選擇一個隨機的十六進制選擇器,但僅限於某些顏色?覆蓋層的最佳方式

我試圖重新創建下面的圖像,但實際上編碼它。

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

回答

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); 
     }); 

它通過循環類紅色的每個像素,並建立一個隨機的背景顏色。

您可以隨意使用隨機值和範圍來獲得所需的結果。 ;)