jquery随机展示头像代码
2018-10-12 14:02
656 查看
先分析实现思路
需要一个容器,作为头像显示的区域。
容器内部需要头像图片作为展示。
随机每个头像的大小,位置,层级。
头像位置随机范围要减去等于该头像宽高,以限制随机范围不溢出容器。
样式
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 随机展示头像实现代码
- jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
- jQuery循环滚动展示代码[转]
- 随机排序12宫格的头像展示Demo
- Jquery 代码中插入php代码段并展示出来
- Jquery 焦点图 用于图片展示效果代码
- 对Jquery上传头像截取代码的更新
- 常用的jQuery九宫格布局图片展示特效代码
- jQuery循环滚动展示代码
- 基于jQuery的超酷预览图展示特效代码
- Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
- jquery类似新浪搜狐新闻图集网页图片展示代码
- 基于jQuery的360图片展示实现代码
- 分享几个基于jQuery不错的前端相册展示插件代码
- 对Jquery上传头像截取代码的更新
- javascript 随机展示头像