Native JS realizes large-screen random display of Avatar

The effect is as follows:

First, the HTML part

<divclass="MyContainer"> <ul> <liclass=" First">"images/1.jpg"></li> <liclass="Second">"images/2.jpg"></li> <liclass="Third">"images/3.jpg"></li> <liclass="Fourth">"images/4.jpg"></li> <liclass="Firth">"images/5.jpg"></li> <liclass="Sixth">"images/6.jpg"></li> <liclass=" First">"images/7.jpg"></li> <liclass="Second">"images/8.jpg"></li> <liclass="Third">"images/9.jpg"></li> <liclass="Fourth">"images/10.jpg"></li> <liclass="Firth">"images/11.jpg"></li> <liclass="Sixth">"images/12.jpg"></li> </ul> </div>

Ii. CSS section (clear style write yourself ha)

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:1;Z-index:6;}. 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:5;}. 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:4;}. 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:3;}. 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:2;}. 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:1;}. Sixth img{width:100%;Height:100%;Border-radius:50%;Border:1px solid #346fe0;Box-shadow:0 0 20px 1px #0927c1;}ul{position:relative;}

Third, JS part

(function(){            varUl=document.getelementsbytagname (' ul ') [0]; varLi=ul.getelementsbytagname (' Li ');  for(vari = 0; i < li.length; i++{//loop positioning for each elementvars =Li[i].style; S.position= ' absolute '; Set to absolute positioningvarSwidth =li[i].clientwidth;//Take the width of each Livarmywidth=ul.offsetwidth-Swidth; varmyheight=ul.offsetheight-Swidth; if(mywidth>0) {S.left= Math.floor (Math.random () * (mywidth)) + ' px '; }                if(myheight>0) {S.top= Math.floor (Math.random () * (myheight)) + ' px '; }            }        })()

Native JS realizes large-screen random display of Avatar