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 相关文章推荐
document.all与WEB标准
May 13 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
解析php类的注册与自动加载
2013/07/05 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP attributes()函数讲解
2019/02/03 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
vue-loader教程介绍
2017/06/14 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
创业计划书中要认真思考的问题
2013/12/28 职场文书
房地产广告词大全
2014/03/19 职场文书
班子四风对照检查材料
2014/08/21 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年计生工作总结
2014/11/21 职场文书
基层党支部承诺书
2015/04/30 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Go并发4种方法简明讲解
2022/04/06 Golang