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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
JavaScript this 深入理解
2009/07/30 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JS实现简单打字测试
2020/06/24 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python魔法方法详解
2019/02/13 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python字符串Intern机制详解
2019/07/01 Python
python实现井字棋小游戏
2020/03/04 Python
Python修改列表值问题解决方案
2020/03/06 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis