开锁公司网站模板,网址建立快捷方式,凡氪官网,wordpress 禁止删除分类点击右上方红色按钮关注“小郑搞码事”#xff0c;每天都能学到知识#xff0c;搞懂一个问题#xff01;大家好#xff01;我是/小郑搞码事/的小郑今天给大家分享JavaScript的基础知识-改变元素的位置。没错#xff0c;用JS实现过动画的同学都应该了解一点#xff0c;简单…点击右上方红色按钮关注“小郑搞码事”每天都能学到知识搞懂一个问题大家好我是/小郑搞码事/的小郑今天给大家分享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呢 看下面这段代码这个函数将要完成如下操作把现有的window.onload事件处理函数的值存入变量oldonload。如何在这个处理函数上还没有绑定任何函数就像平时那样把新函数添加给它。如何在这个处理函数上已经绑定了一些函数就把函数追加到现有指令的末尾。调用的时候就可以直接像下面这样使用addLoadEvent(positionMessage)二、改变dom位置那么如何改变DOM的位置了也就很简单了我断续来写一个控制元素移动的函数。如下综上所述代码调用如下addLoadEvent(moveMessage)效果如下其实是一个静态的效果因为我们还没有加时间时间递增量等。总结一下我们最终要实现的是一个可控的动画函数这些在接下来的篇幅中我会把代码列出来这些都是JS最基础的知识点好好复习和加强巩固。
