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中的this關鍵字
這篇文章利用圖片講解的方式向大家解釋了JavaScript中的this關鍵字，JavaScript this 到底指向什么？從這篇文章中大家可以得到想要的答案，需要的朋友可以參考下
2015-10-10
微信小程序實現(xiàn)計時器
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)計時器，小程序點擊事件觸發(fā)計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
Echarts基本入門之柱狀圖、折線圖通用配置
現(xiàn)在各種框架各種庫都很強大,但是也因為功能強大,導致很多配置都過于繁重,真正有用的就那么幾個,這篇文章主要給大家介紹了關于Echarts基本入門之柱狀圖、折線圖通用配置的相關資料,需要的朋友可以參考下
2021-06-06
js如何修改對象數(shù)組的key值
這篇文章主要介紹了js如何修改對象數(shù)組的key值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
詳解小程序用戶登錄狀態(tài)檢查與更新實例
這篇文章主要介紹了小程序用戶登錄狀態(tài)檢查與更新實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
原生JS獲取URL鏈接參數(shù)的幾種常見方法
這篇文章主要給大家介紹了關于利用原生JS獲取URL鏈接參數(shù)的幾種常見方法,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
如何在一個頁面顯示多個百度地圖
經(jīng)常有人問，百度地圖JavaScript API能在同一頁面顯示多個地圖嗎？當然可以啊，為什么不可以呢？地圖之于頁面無非就是個div，我們可以在頁面顯示多個div，自然也可以顯示多個地圖。
2013-04-04
JavaScript實現(xiàn)簡單抽獎系統(tǒng)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
JavaScript算法教程之sku（庫存量單位）詳解
這篇文章主要給大家介紹了JavaScript算法教程之sku（庫存量單位）的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。
2017-06-06
JS操作Cookies的小例子
這篇文章介紹了JS操作Cookies的小例子，有需要的朋友可以參考一下
2013-10-10