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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
JS实现多选框的操作
Jun 24 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 在线打包_支持子目录
2008/06/28 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php实现字符串翻转的方法
2015/03/27 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
原生js实现随机点名
2020/07/05 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python中取整的几种方法小结
2017/01/06 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
我的中国梦演讲稿600字
2014/08/19 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
会议通知格式范文
2015/04/15 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
python通过新建环境安装tfx的问题
2022/05/20 Python