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实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
如何利用React实现图片识别App
Feb 18 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
php2html php生成静态页函数
2008/12/08 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python中文编码问题小结
2014/09/28 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Linux的主要特性
2016/09/03 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
自我鉴定模板
2013/10/29 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
服务员岗位责任制
2014/02/11 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
Python中Permission denied的解决方案
2021/04/02 Python