javascript 隨機(jī)展示頭像實(shí)現(xiàn)代碼

更新時(shí)間：2011年12月06日 20:38:49 作者：

隨機(jī)展示小頭像，隨機(jī)數(shù)包括位置、層級(jí)、大小、透明度等

先看圖：

很簡(jiǎn)單的一個(gè)效果
首先html

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

 
<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

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

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

很小一點(diǎn)js

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

 
(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[i].style; 
s.position = 'absolute'; 
s.zIndex = Math.floor(Math.random()*90) + 10;//層級(jí) 基本隨機(jī)數(shù) 
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; 
} 
})() 

最后的效果是：越大得頭層級(jí)越高透明度越低，如果外層ul足夠大得話，層級(jí)更加分明。

相關(guān)文章

JavaScript中獲取樣式的原生方法小結(jié)
這篇文章主要介紹了JavaScript中獲取樣式的原生方法小結(jié),本文總結(jié)了5種JS獲取樣式的原生方法,并分別給出了實(shí)例,需要的朋友可以參考下
2014-10-10
js中Map和Set的用法及區(qū)別實(shí)例詳解
map和set一樣是關(guān)聯(lián)式容器,它們的底層容器都是紅黑樹,區(qū)別就在于map的值不作為鍵,鍵和值是分開的,下面這篇文章主要給大家介紹了關(guān)于js中Map和Set的用法及區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-02-02
ES6中Promise、async和await面試題整理
promise是每個(gè)前端人必須會(huì)接觸到的一個(gè)知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于ES6中Promise、async和await面試題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
利用騰訊的ip地址庫(kù)做ip物理地址定位
騰訊的這個(gè)還是相對(duì)比較準(zhǔn)確的。因?yàn)轵v訊每個(gè)QQ用戶發(fā)現(xiàn)自己匹配的地理位置信息不準(zhǔn)確都可以提交更正的
2010-07-07
Javascript 函數(shù)對(duì)象的多重身份
函數(shù)對(duì)象是javascript 中一個(gè)很特殊的對(duì)象，其特殊體現(xiàn)在他的多重身份上。
2009-06-06
一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例
這篇文章主要與大家分享一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例，很簡(jiǎn)單，但很實(shí)用，大家可以看看
2014-09-09
BootStrap Table復(fù)選框默認(rèn)選中功能的實(shí)現(xiàn)代碼(從數(shù)據(jù)庫(kù)獲取到對(duì)應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài))
本文通過實(shí)例代碼給大家介紹了BootStrap Table復(fù)選框默認(rèn)選中功能(從數(shù)據(jù)庫(kù)獲取到對(duì)應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài))，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-07-07
JavaScript中常見的Polyfill介紹
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見的JavaScript Polyfill兼容方案,并舉例說明它們的應(yīng)用,需要的可以參考下
2023-12-12
詳解javascript函數(shù)的參數(shù)
javascript函數(shù)可以用任意多個(gè)參數(shù)來調(diào)用，而不用管函數(shù)定義時(shí)指定了幾個(gè)參數(shù)。因?yàn)楹瘮?shù)是弱類型的，沒有方法去聲明它所期望的參數(shù)類型，并且給任何函數(shù)傳遞任何類型的值都是合法的
2015-11-11
深入理解JS繼承和原型鏈的問題
js原型鏈與繼承是js中的重點(diǎn),原型的實(shí)現(xiàn)則是在原型鏈的基礎(chǔ)上，本篇文章深入理解JS繼承和原型鏈的問題，有興趣的同學(xué)可以了解一下。
2016-12-12