jquery随机展示头像代码


Posted in Javascript onDecember 21, 2011

先分析实现思路

需要一个容器,作为头像显示的区域。
容器内部需要头像图片作为展示。
随机每个头像的大小,位置,层级。
头像位置随机范围要减去等于该头像宽高,以限制随机范围不溢出容器。

样式

*{ margin:0; padding:0;} 
.Icon-Box{ width:960px; height:700px; margin:0 auto; position:relative;} 
.Icon-Box li{ position:absolute; list-style:none;} 
.Icon-Box li img{ width:100%;}

HTML
<ul class="Icon-Box"> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
<li><img src="xx.jpg" /></li> 
</ul>

jquery脚本
function randomICON(){ 
//获取LI作为随机展示的盒子 
var $ico = $(".Icon-Box li"); 
//获取显示容器的宽度 
var $width = $(".Icon-Box").width(); 
//获取显示容器的高度 
var $height = $(".Icon-Box").height(); 
//通过循环为每一个盒子设置单独的属性 
for(i=0;i < $ico.length;i++){ 
//随机一个个整数最小为10,将影响图片大小,层级位置,透明度,位置 
var zindex = Math.floor(Math.random()*110)+10; 
$ico.eq(i).css({"z-index":zindex+'px', 
width:zindex+'px', 
height:zindex+'px', 
//随机宽高度减去zindex以防止溢出显示容器。 
left:Math.floor(Math.random()*($width-zindex))+"px", 
top:Math.floor(Math.random()*($height-zindex))+"px", 
opacity:zindex/100 
}); 
} 
} 
randomICON();

jquery随机展示头像代码
上面插入的脚本可能看不清,弄个编辑器里面的截图出来了。
Javascript 相关文章推荐
JS 对象介绍
Jan 20 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vue-cli配置环境变量的方法
Jul 09 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 #Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 #Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 #Javascript
这段js代码得节约你多少时间
Dec 20 #Javascript
You might like
PHP新手上路(八)
2006/10/09 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
使用正则替换变量
2007/05/05 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JS中的函数与对象的创建方式
2019/05/12 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python中的元组介绍
2019/01/28 Python
Python os.access()用法实例
2019/02/18 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
校园安全演讲稿
2014/05/09 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
暑期实践个人总结
2015/03/06 职场文书
收银员岗位职责范本
2015/04/07 职场文书
教师继续教育反思周记
2015/06/25 职场文书
PyMongo 查询数据的实现
2021/06/28 Python