效果如下图所示:

一、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. System.Web.UI.WebControls.FileUpload.cs

    ylbtech-System.Web.UI.WebControls.FileUpload.cs 1. 程序集 System.Web, Version=4.0.0.0, Culture=neutral, ...

  2. MyBatis的查询

    MyBatis的查询 在上一个MyBatis的核心API中介绍了SqlSessionFactoryBuilder.SqlSessionFactory以及SqlSession是什么,它们都有什么作用,本 ...

  3. 在windows中用cmd命令执行python无限循环程序如何停止

    在windows中用cmd命令测试python带有无限循环的程序,当想要终止时, 即linux中的Ctrl + D 相似的功能时可以用 Ctrl + Pause Break, 有FN功能键的可能要使用 ...

  4. 解析Asp.net Core中使用Session的方法

    2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. 元旦放假在家写了个Asp.net Core验证码登录, 做demo的过程中遇到两个小问题,第一是在Asp.net Core中引 ...

  5. 一个mdl相关的问题

    感觉挺有意义的,细节问题 http://www.kernelmode.info/forum/viewtopic.php?f=14&t=4318这个人代码到底犯了什么错误 I want to p ...

  6. 课程笔记-lisanke

    1.判断真需求假需求 真需求:所有人都需要的功能 假需求:只有自己需要的功能 2.找到目标用户 ①不要直接询问是否需要这个功能 ②旁敲侧击式提问:用户使用了什么方式?之前都是怎么做的? case:购物 ...

  7. Entity Framework Code First 模式-建立一对一联系

    使用的例子为教室(ClassRoom),教室里的多媒体设备(Device),一个教室里有一套多媒体设备,一套多媒体设备只放在一个教室里. 1.Data Annotations方式 需要在任意一方的主键 ...

  8. Python全栈开发:基本数据类型

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2 ...

  9. AMPQ

    AMPQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议, 是`应用层协议的一个开放标准,为面向消息的中间件设计`. 由于AMQP是一个网络协议,所以 ...

  10. SpringBoot_02_SpringBoot的配置文件

    1.SpringBoot配置文件 SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用application.properties或者appli ...