图片层级切换

<style>
    div{
      width: 200px;
      height: 200px;
     position: absolute;  
      }
    </style>
<body>
<div class="one" style="pink;left: 100px;top: 100px;z-index: 0;">我是第一个div</div>
  <div class="two" style=" left: 120px; top: 120px;z-index: 1;">我是第二个div</div>
  <div class="three" style="orangered;left: 140px;top: 140px;z-index: 2;">我是第三个div</div>
  <div class="four" style="greenyellow;left: 160px;top: 160px;z-index: 3;">我是第四个div</div>
  <div class="five" style=" left: 180px;top: 180px;z-index: 4;">我是第五个div</div>
  <button>切换</button>
<script>
let btn=document.getElementsByTagName("button")[0];
let divs=document.getElementsByTagName('div');
btn.onclick=function(){
for(let i=0;i<divs.length;i++){
  if(parseInt(divs[i].style.zIndex)===4){
    divs[i].style.zIndex=0;
    divs[i].style.left =100+'px';
    divs[i].style.top =100+'px';
  }
else{
  divs[i].style.zIndex=parseInt(divs[i].style.zIndex) +1;
  divs[i].style.left=parseInt(divs[i].style.left) +20+'px';
  divs[i].style.top=parseInt(divs[i].style.top) +20+'px';
    }
  } 
}
</script>
</body>
 
效果图：

 

posted on 2019-10-24 17:14  惜圆  阅读(233)  评论(0)    收藏  举报

导航