原生js实现div跳动效果---很多炫酷效果的基本原理

div{width: 100px;height: 100px; float: left;margin-left: 2rem;}

<div style="background-color: darkolivegreen;" name="div"></div>
<div style="background-color: darkblue;" name="div"></div>
<div style="background-color: crimson;" name="div"></div>
<div style="background-color: gold;" name="div"></div>

window.onload = function(){
      var div0 = document.getElementsByTagName("div")[0];
      var div1 = document.getElementsByTagName("div")[1];
      var div2 = document.getElementsByTagName("div")[2];
      var div3 = document.getElementsByTagName("div")[3];
      div0.onmouseover = function(){
        div0.style.marginTop = "30px";
      }
      div0.onmouseout = function(){
        div0.style.marginTop = "0px";
      }
      div1.onmouseover = function(){
        div1.style.marginTop = "30px";
      }
      div1.onmouseout = function(){
        div1.style.marginTop = "0px";
      }
      div2.onmouseover = function(){
        div2.style.marginTop = "30px";
      }
      div2.onmouseout = function(){
        div2.style.marginTop = "0px";
      }
      div3.onmouseover = function(){
        div3.style.marginTop = "30px";
      }
      div3.onmouseout = function(){
        div3.style.marginTop = "0px";
      }
    }