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

何处锦绣不灰堆

发布于 2020-05-29 09:58:52

1.9K0

发布于 2020-05-29 09:58:52

文章被收录于专栏：农历七月廿一

效果预览：

这块实现起来很简单，原生的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";
			}
		}

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