用 js 实现键盘控制图片移动的事例

电脑

sublime

这里就介绍一些 这个页面的功能，主要是实现在 方框（div）内，由键盘自由的控制移动图片；（方框就是范围）；然后有三个功能键，作用大家看图应该都可以明白；下图是 页面 架构；（图片大家可以自己准备，路径没错图片可以任意换的）

之后就是 css 样式了；边框 ，位置 ，之类的都比较简单，就不复述了；关键是定位 position ；img 的定位要是相对它的的 父元素 绝对定位；（这样在控制移动的时候才会正常）

然后就是 js 部分 ，先是获取 div   img  和 button 对象；之后设置 一个 敲击 键盘触发的事件；获取 d2 的 宽和高 （外部的 left 和 top 是为了以防要用 ，其实可以不获取的），获取 img 的 left 和 top ，这是控制移动的关键，img 的宽和高 是为了后面的限制在边框；

以一个判断做解释，39 是右方向键 ，点击这个的时候判断 img 的位置是不是已经贴到有边框 （也就是 d2 的宽 减去 img 的宽，一些数字添加是为了显现完全不碰到边框），没有就是 控制 img 的 left 增加，到达就是 获取 它可以移动的 最大数值（d2width - oimgwidth）然后赋予；图二是移动最大距离的获取示意图

之后我们设置 三个功能键，这就需要 h5  web 储存的知识，这里只是简单的 用 localstorage  记住了  img 的left 和 top；点击 but1 记住 ，点击but2 赋予；点解 but3 恢复初始（这里直接赋值了，偷懒了。。。）