js封装函数_JavaScript基础-如何封装函数来改变元素的位置

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天给大家分享JavaScript的基础知识-改变元素的位置。

没错，用JS实现过动画的同学都应该了解一点，简单来说，动画就是让元素的位置随着时间而不断地发生变化。所以改动元素位置就成了第一步。

今天讲解的例子，DOM结构及简略样式如下：

// 样式

#message{

position: relative;

width:330px;

height:330px;

background:#eee;

}

#block{

width:20px;

height:20px;

background:red;

}

// dom结构

一、初始化dom位置

如果需要默认动态初始化DOM的位置，可以设置元素的style属性。代码如下：

在dom加载完成之后，直接运行这个函数就能初始化dom的位置。如

window.onload = positionMessage

当然，最好是封装成一个函数来调用，方便有更多初始化的操作可以便利加入到这个函数中。那怎么封装window.onload呢？ 看下面这段代码：

这个函数将要完成如下操作：

1. 把现有的window.onload事件处理函数的值存入变量oldonload。
2. 如何在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。
3. 如何在这个处理函数上已经绑定了一些函数，就把函数追加到现有指令的末尾。

调用的时候就可以直接像下面这样使用：

addLoadEvent(positionMessage)

二、改变dom位置

那么如何改变DOM的位置了？也就很简单了，我断续来写一个控制元素移动的函数。

如下：

综上所述，代码调用如下：

addLoadEvent(moveMessage)

效果如下：其实是一个静态的效果，因为我们还没有加时间，时间递增量等。

总结一下：

我们最终要实现的是一个可控的动画函数，这些在接下来的篇幅中我会把代码列出来，这些都是JS最基础的知识点，好好复习和加强巩固。