 
*{ 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)為每一個(gè)盒子設(shè)置單獨(dú)的屬性 
for(i=0;i &lt; $ico.length;i++){ 
//隨機(jī)一個(gè)個(gè)整數(shù)最小為10，將影響圖片大小，層級(jí)位置，透明度，位置 
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(); 