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 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
angular select 默认值设置方法
Jun 23 Javascript
小程序实现抽奖动画
Apr 16 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
探索node之事件循环的实现
Oct 30 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中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JavaScript实现简单随机点名器
2019/11/21 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python zip()函数用法实例分析
2018/03/17 Python
python django生成迁移文件的实例
2019/08/31 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
好的自荐信的要求
2013/10/30 职场文书
初中体育教学反思
2014/01/14 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS