效果如下图所示:

一、html部分

    <div class="myContainer">
<ul>
<li class="first"><img src="data:images/1.jpg"></li>
<li class="second"><img src="data:images/2.jpg"></li>
<li class="third"><img src="data:images/3.jpg"></li>
<li class="fourth"><img src="data:images/4.jpg"></li>
<li class="firth"><img src="data:images/5.jpg"></li>
<li class="sixth"><img src="data:images/6.jpg"></li>
<li class="first"><img src="data:images/7.jpg"></li>
<li class="second"><img src="data:images/8.jpg"></li>
<li class="third"><img src="data:images/9.jpg"></li>
<li class="fourth"><img src="data:images/10.jpg"></li>
<li class="firth"><img src="data:images/11.jpg"></li>
<li class="sixth"><img src="data:images/12.jpg"></li>
</ul>
</div>

二、css部分(清除样式自己写哈)

body,html {
width: 100%;
height: 100%;
} .myContainer {
width: 100%;
height: 100%;
background-image: url('../images/bg.png');
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
} .first {
width: 128px;
height: 128px;
opacity:;
z-index:;
} .first img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 40px 6px #0927c1;
} .second {
width: 114px;
height: 114px;
opacity: .9;
z-index:;
} .second img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 30px 4px #0927c1;
} .third {
width: 100px;
height: 100px;
opacity: .8;
z-index:;
} .third img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 30px 3px #0927c1;
} .fourth {
width: 86px;
height: 86px;
opacity: .7;
z-index:;
} .fourth img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 20px 3px #0927c1;
} .firth {
width: 78px;
height: 78px;
opacity: .6;
z-index:;
} .firth img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 20px 2px #0927c1;
} .sixth {
width: 54px;
height: 54px;
opacity: .5;
z-index:;
} .sixth img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #346fe0;
box-shadow: 0 0 20px 1px #0927c1;
} ul {
position:relative;
   width: 100%;
   height: 100%;
}

三、js部分

    (function(){
var ul=document.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) { //循环为每个元素定位
var s = li[i].style;
s.position = 'absolute'; //设置为绝对定位
var sWidth = li[i].clientWidth; //取到每一个li的宽度
var myWidth=ul.offsetWidth-sWidth;
var myHeight=ul.offsetHeight-sWidth;
if (myWidth>0) {
s.left = Math.floor(Math.random() * (myWidth)) + 'px';
} else {
s.left = 0;
          };
          if(myHeight>0) {
            s.top = Math.floor(Math.random() * (myHeight)) + 'px'; }
          } else {
            s.top=0;
         }
      })()

原生js实现头像大屏随机显示的更多相关文章

  1. 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容

    引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储    首先考虑用二维数组存储所有行数,列数   ...

  2. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. 原生js实现网页触屏滑动

    前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

  4. swiper 滑动插件,小屏单个显示滑动,大屏全部显示

    var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...

  5. 原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。

    1 document.getElementsByName("name")  在Ie低版本,360普通版本,以及火狐低版本不支持. 2 element.innerText 在低版本的 ...

  6. 原生js实现浏览器全屏和退出全屏

    全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...

  7. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  8. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  9. 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

    前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...

随机推荐

  1. Android_Gallery(画廊)

    转:http://blog.csdn.net/tianjf0514/article/details/7521398 Gallery是画廊的意思,可以实现图片的浏览功能. 主要内容 Gallery控件的 ...

  2. element table初始化默认选中以及切换页码的时候保留选中状态

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- impor ...

  3. hibernate annotation 之 注解声明

    @Entity 将一个 POJO 类注解成一个实体 bean ( 持久化 POJO 类 ) @Table 为实体 bean 映射指定具体的表,如果该注解没有被声明,系统将使用默认值 ( 即实体 bea ...

  4. elasticsearch的索引清理

    curl -XDELETE 'http://127.0.0.1:9200/winlogbeat-6.0.0-2017.07.*' 脚本加api删除(推荐) cat es-index-clear.sh ...

  5. 16.ajax_case09

    import requests import json import re from selenium import webdriver from selenium.webdriver.common. ...

  6. Java中方法的定义与使用,以及对数组的初步了解。

    方法 方法的含义 定义: 方法就是用来完成解决某件事情或实现某个功能的办法. 方法实现的过程中,会包含很多条语句用于完成某些有意义的功能——通常是处理文本,控制输入或计算数值. 我们可以通过在程序代码 ...

  7. nvelocity的Foreach 中使用DataTable数据

    原文:nvelocity的Foreach 中使用DataTable数据 tripDetailList是一个DataTable类型的数据,Logo.TripTypeName.TipTypePrice等为 ...

  8. java_缓冲流(字节输出流)

    缓冲流分为: 字节缓冲流:BufferedIntputSream(字节缓冲输出流),BufferdOutputStream(字节缓冲输入流) 字符缓冲流:BufferedReader(字符输入缓冲流) ...

  9. ThinkPHP无限分类模块设计

    public function catelist(){ $cate=D('Cate'); //var_dump($cate->gettree());exit; $cateres=$cate-&g ...

  10. php7 mysql_pconnect() 缺失 解决方法

    php7 兼容 MySQL 相关函数 PHP7 废除了 ”mysql.dll” ,推荐使用 mysqli 或者 pdo_mysql http://PHP.net/manual/zh/mysqlinfo ...