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

效果预览:

这块实现起来很简单,原生的js实现更简单。为什么写这个呢?因为这个其实是很多网页动态效果的一个原型,不管是什么大型的网站,其实底层的原理都是一样的,基本思路是,画出DIV,然后载入页面的时候加载到每一个div元素,然后就是控制鼠标的事件,移入和移出的时候执行偏移函数。

不BB,上代码:

代码语言:javascript
复制
div{width: 100px;height: 100px; float: left;margin-left: 2rem;}
代码语言:javascript
复制
<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>
代码语言:javascript
复制
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";
			}
		}

看完代码是不是都傻了,怎么可以那么简单,是的,就是那么的简单,很多的时候我们看到的效果其实实现的原理是很简单的,只是看我们是不是可以巧妙的运用。