效果預覽：

這塊實現起來很簡單，原生的js實現更簡單。為什麼寫這個呢？因為這個其實是很多網頁動態效果的一個原型，不管是什麼大型的網站，其實底層的原理都是一樣的，基本思路是，畫出DIV，然後載入頁面的時候載入到每一個div元素，然後就是控制滑鼠的事件，移入和移出的時候執行偏移函式。

不BB，上程式碼：

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";
			}
		}
 

看完程式碼是不是都傻了，怎麼可以那麼簡單，是的，就是那麼的簡單，很多的時候我們看到的效果其實實現的原理是很簡單的，只是看我們是不是可以巧妙的運用。