快捷導(dǎo)航

jquery隨機(jī)展示頭像代碼

更新時間：2011年12月21日 21:42:41 作者：

通過最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時，圖像最大，透明低。越往后頭像就越小，就越透明

先分析實現(xiàn)思路

需要一個容器，作為頭像顯示的區(qū)域。
容器內(nèi)部需要頭像圖片作為展示。
隨機(jī)每個頭像的大小，位置，層級。
頭像位置隨機(jī)范圍要減去等于該頭像寬高，以限制隨機(jī)范圍不溢出容器。

樣式

復(fù)制代碼代碼如下:

 
*{ margin:0; padding:0;} 
.Icon-Box{ width:960px; height:700px; margin:0 auto; position:relative;} 
.Icon-Box li{ position:absolute; list-style:none;} 
.Icon-Box li img{ width:100%;} 

HTML

復(fù)制代碼代碼如下:

 
<ul class="Icon-Box"> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
</ul> 

jquery腳本

復(fù)制代碼代碼如下:

 
function randomICON(){ 
//獲取LI作為隨機(jī)展示的盒子 
var $ico = $(&quot;.Icon-Box li&quot;); 
//獲取顯示容器的寬度 
var $width = $(&quot;.Icon-Box&quot;).width(); 
//獲取顯示容器的高度 
var $height = $(&quot;.Icon-Box&quot;).height(); 
//通過循環(huán)為每一個盒子設(shè)置單獨的屬性 
for(i=0;i &lt; $ico.length;i++){ 
//隨機(jī)一個個整數(shù)最小為10，將影響圖片大小，層級位置，透明度，位置 
var zindex = Math.floor(Math.random()*110)+10; 
$ico.eq(i).css({&quot;z-index&quot;:zindex+&#39;px&#39;, 
width:zindex+&#39;px&#39;, 
height:zindex+&#39;px&#39;, 
//隨機(jī)寬高度減去zindex以防止溢出顯示容器。 
left:Math.floor(Math.random()*($width-zindex))+&quot;px&quot;, 
top:Math.floor(Math.random()*($height-zindex))+&quot;px&quot;, 
opacity:zindex/100 
}); 
} 
} 
randomICON(); 