用 js 实现键盘控制图片移动的事例
期末测验抽中了一道这个样的的标题问题，因为是测验时候有些不敷，一些细节没有做好于是回来从头完美了一遍这里就分享给大师了（固然仍是很简单。。。是一些根本常识的应用）
东西/原料
- 电脑
- sublime
方式/步调
- 1
这里就介绍一些 这个页面的功能，本家儿如果实此刻 方框（div）内，由键盘自由的节制移动图片；（方框就是规模）；然后有三个功能键，感化大师看图应该都可以大白；
下图是 页面 架构；（图片大师可以本身筹办，路径没错图片可以肆意换的）
- 2
之后就是 css 样式了；边框 ，位置 ，之类的都比力简单，就不复述了；关头是
定位 position ；img 的定位如果相对它的的 父元素 绝对定位；（如许在节制移动的时辰才会正常）
- 3
然后就是 js 部门 ，先是获取 div img 和 button 对象；
之后设置 一个 敲击 键盘触发的事务；获取 d2 的 宽和高 （外部的 left 和 top 是为了以防要用 ，其实可以不获取的），获取 img 的 left 和 top ，这是节制移动的关头，img 的宽和高 是为了后面的限制在边框；
- 4
以一个判定做诠释，39 是右偏向键 ，点击这个的时辰判定 img 的位置是不是已经贴到有边框 （也就是 d2 的宽 减去 img 的宽，一些数字添加是为了闪现完全不碰着边框），没有就是 节制 img 的 left 增添，达到就是 获取 它可以移动的 最年夜数值（d2width - oimgwidth）然后付与；
图二是移动最年夜距离的获取示意图
- 5
之后我们设置 三个功能键，这就需要 h5 web 储存的常识，这里只是简单的 用 localstorage 记住了 img 的left 和 top；点击 but1 记住 ，点击but2 付与；点解 but3 恢复初始（这里直接赋值了，偷懒了。。。）
注重事项
- 小我进修经验，仅作分享；
- 发表于 2018-07-06 00:00
- 阅读 ( 844 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章