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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python如何读取MySQL数据库表数据
2017/03/11 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python列表的逆序遍历实现
2020/04/20 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
css3学习心得分享
2013/08/19 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
开会迟到检讨书
2014/02/03 职场文书
中年人生感言
2014/02/04 职场文书
上班离岗检讨书
2014/09/10 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Vue如何清空对象
2022/03/03 Vue.js