摘要：看下面里面的，，，分别是左上右下的键值。这样我们就可以实现上下左右键移动图片了。以像素为单位返回元素相对于版面或由属性指定的父坐标的计算左侧位置。
今天看了dom的一些知识，巩固了一下js基础，突然想到自己想做一个小汽车移动的功能，所以二话不说，先来构思一下：首先我们找一张小汽车的图片，把它放在页面中，然后需要用到上下左右键交互，所以必须用到js中dom的知识了。
car
我为了让效果看的更加明显，把汽车放在了页面正中间。接下来就要写js了。首先我们必须明白，要让图片移动必须先选中图片，而且交互要交互在图片上，有些朋友在这时候可能会想，键盘事件一般发生在输入框之类当中，让图片响应键盘事件该怎么办。知识都是一点点理解实践起来的，所以我们在这里想象一下：我们如果拿到了图片，在图片上添加img.onkeyup会有用吗？这时候图片是肯定不会响应的，就相当于我不想唱歌，非让我唱，但是爸爸过来了，爸爸很严厉，他让我唱！我只能唱，所以我们干嘛不加到document上呢。选定document，里面的图片自然而然就选上了。看下面js：
里面的37，38，39，40分别是左上右下的键值。这样我们就可以实现上下左右键移动图片了。
有一个知识点，就是offset：
offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。
完整代码如下：
car
有不正确的地方望大家指教，祝大家早日富可敌国，bye~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97702.html
摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。 回顾 算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频 播放按钮隐藏 视频开始播放 当点击播放按钮的时候，播...
摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。 回顾 算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频 播放按钮隐藏 视频开始播放 当点击播放按钮的时候，播...
摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。 转载自我的个人博客 欢迎大家批评指正 包括5部分： 小练习1-处理用户输入 小练习2-日期对象的使用 小练习3：轮播图 小练习4：输入提示框 小练习...
摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。 转载自我的个人博客 欢迎大家批评指正 包括5部分： 小练习1-处理用户输入 小练习2-日期对象的使用 小练习3：轮播图 小练习4：输入提示框 小练习...
阅读 904·2021-09-29 09:35
阅读 1252·2021-09-28 09:36
阅读 1521·2021-09-24 10:38
阅读 1065·2021-09-10 11:18
阅读 630·2019-08-30 15:54
阅读 2496·2019-08-30 13:22
阅读 1963·2019-08-30 11:14
阅读 696·2019-08-29 12:35
