原生js实现头像大屏随机显示

Posted 2020-11-20 Candy-Yao

效果如下图所示：

 

一、html部分

    <div class="myContainer">
        <ul>
            <li class="first"><img src="images/1.jpg"></li>
            <li class="second"><img src="images/2.jpg"></li>
            <li class="third"><img src="images/3.jpg"></li>
            <li class="fourth"><img src="images/4.jpg"></li>
            <li class="firth"><img src="images/5.jpg"></li>
            <li class="sixth"><img src="images/6.jpg"></li>
            <li class="first"><img src="images/7.jpg"></li>
            <li class="second"><img src="images/8.jpg"></li>
            <li class="third"><img src="images/9.jpg"></li>
            <li class="fourth"><img src="images/10.jpg"></li>
            <li class="firth"><img src="images/11.jpg"></li>
            <li class="sixth"><img src="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: 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;
　　 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;
　　　　　　　　　}
　　　　　　})()