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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
php 页面执行时间计算代码
2008/12/04 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP错误机制知识汇总
2016/03/24 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
使用python3实现操作串口详解
2019/01/01 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
文明上网主题班会
2015/08/14 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
七个Python必备的GUI库
2021/04/27 Python
配置Kubernetes外网访问集群
2022/03/31 Servers
Oracle中日期的使用方法实例
2022/07/07 Oracle
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript