jquery随机展示头像代码
2011-12-21 00:00
741 查看
先分析实现思路
需要一个容器,作为头像显示的区域。
容器内部需要头像图片作为展示。
随机每个头像的大小,位置,层级。
头像位置随机范围要减去等于该头像宽高,以限制随机范围不溢出容器。
样式
HTML
jquery脚本
上面插入的脚本可能看不清,弄个编辑器里面的截图出来了。
需要一个容器,作为头像显示的区域。
容器内部需要头像图片作为展示。
随机每个头像的大小,位置,层级。
头像位置随机范围要减去等于该头像宽高,以限制随机范围不溢出容器。
样式
*{ 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随机展示头像的实现代码
- jquery随机展示头像代码
- jquery随机展示头像的实现代码
- javascript 随机展示头像实现代码
- javascript 随机展示头像实现代码
- 随机排序12宫格的头像展示Demo
- 基于jQuery的超酷预览图展示特效代码
- js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图
- Jquery 焦点图 用于图片展示效果代码
- jQuery循环滚动展示代码
- 两行代码实现随机头像
- 对Jquery上传头像截取代码的更新
- 论坛头像随机变换代码
- jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
- 刷新一次变一次的图片代码-PHP随机显示图片代码:可制作头像或签名
- 论坛头像随机变换代码
- 常用的jQuery九宫格布局图片展示特效代码
- 基于jQuery的360图片展示实现代码
- javascript 随机展示头像
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构