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

       期末测验抽中了一道这个样的的标题问题，因为是测验时候有些不敷，一些细节没有做好于是回来从头完美了一遍这里就分享给大师了（固然仍是很简单。。。是一些根本常识的应用）

东西/原料

• 电脑
• sublime

方式/步调

1. 1

   这里就介绍一些 这个页面的功能，本家儿如果实此刻 方框（div）内，由键盘自由的节制移动图片；（方框就是规模）；然后有三个功能键，感化大师看图应该都可以大白；

   下图是 页面 架构；（图片大师可以本身筹办，路径没错图片可以肆意换的）

   
2. 2

   之后就是 css 样式了；边框 ，位置 ，之类的都比力简单，就不复述了；关头是

   定位 position ；img 的定位如果相对它的的 父元素 绝对定位；（如许在节制移动的时辰才会正常）

   
3. 3

   然后就是 js 部门 ，先是获取 div   img  和 button 对象；

   之后设置 一个 敲击 键盘触发的事务；获取 d2 的 宽和高 （外部的 left 和 top 是为了以防要用 ，其实可以不获取的），获取 img 的 left 和 top ，这是节制移动的关头，img 的宽和高 是为了后面的限制在边框；

   
4. 4

   以一个判定做诠释，39 是右偏向键 ，点击这个的时辰判定 img 的位置是不是已经贴到有边框 （也就是 d2 的宽 减去 img 的宽，一些数字添加是为了闪现完全不碰着边框），没有就是 节制 img 的 left 增添，达到就是 获取 它可以移动的 最年夜数值（d2width - oimgwidth）然后付与；

   图二是移动最年夜距离的获取示意图

   
5. 5

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

   

注重事项

• 小我进修经验，仅作分享；