效果预览：
这块实现起来很简单，原生的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"; } }
看完代码是不是都傻了，怎么可以那么简单，是的，就是那么的简单，很多的时候我们看到的效果其实实现的原理是很简单的，只是看我们是不是可以巧妙的运用。
