javascript 随机展示头像实现代码


Posted in Javascript onDecember 06, 2011

先看图:
javascript 随机展示头像实现代码
很简单的一个效果
首先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;//层级 基本随机数 
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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
js实现两点之间画线的方法
May 12 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
jQuery中需要注意的细节问题小结
Dec 06 #Javascript
jQuery load方法用法集锦
Dec 06 #Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 #Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 #Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
2014民事授权委托书范本
2014/09/29 职场文书
委托证明范本
2014/11/25 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015年加油站工作总结
2015/05/13 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
MySQL数据迁移相关总结
2021/04/29 MySQL
微信小程序实现录音Record功能
2021/05/09 Javascript
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python