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

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

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

先看圖：

很簡單的一個效果
首先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[i].style; 
s.position = 'absolute'; 
s.zIndex = Math.floor(Math.random()*90) + 10;//層級 基本隨機數(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; 
} 
})() 

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

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