javascript 随机展示头像实现代码

ttx9n

随机展示小头像，随机数包括 位置、层级、大小、透明度 等 先看图：

很简单的一个效果
首先html
复制代码 代码如下:
<ul>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
</ul>

css
复制代码 代码如下:
ul,li{margin:0;padding:0;}
ul{position:relative;width:100%;height:333px;}
li{border:4px solid gray;border-radius:3px;list-style:none;}
img{width:100%;height:100%;}

很小一点js
复制代码 代码如下:
(function(){
var ul=document.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
for(var i=0,l=li.length;i<l;i++){
var s=li.style;
s.position = 'absolute';
s.zIndex = Math.floor(Math.random()*90) + 10;//层级 基本随机数
s.width = s.height = s.zIndex + 'px';//宽高
s.left = Math.floor(Math.random()*(ul.offsetWidth-s.zIndex)) + 'px';
s.top = Math.floor(Math.random()*(ul.offsetHeight-s.zIndex)) + 'px';
s.opacity = s.zIndex / 100;//透明度
s.filter = 'alpha(opacity=' + s.zIndex + ')';
s.alpha = s.zIndex;
}
})()

最后的效果是 ：越大得头 层级越高 透明度越低 ， 如果外层ul足够大得话，层级更加分明。

ki9ku6

了乐趣了去了去了去了去了

adm1n

快更新啊，我擦

dm00ji1s

非常vbcbvcvbvcb

5cf304mn2

天天源码社区www.tiantianym.com

6hruhg

很不错的样子

u6h2m4

好东西一定要看看！

白狐软件

女生看了弄丢了卡萨诺的卡洛斯

i3x3r3

这个源码还可以

czoz5y

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴