Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > JavaScript random display avatar implementation code_javascript skills

JavaScript random display avatar implementation code_javascript skills

WBOY

Release： 2016-05-16 17:58:50

Original

1214 people have browsed it

先看图：
JavaScript random display avatar implementation code_javascript skills
很简单的一个效果
首先html

复制代码代码如下:

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;ivar s=li[i].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足够大得话，层级更加分明。

Related labels：

avatar

source：php.cn

Previous article：Example learning of DOM operations and events in jquery Drop-down box application_jquery Next article：Analysis of the difference between placing JS code in head and body_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn