用 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【用 js 实现键盘控制图片移动的事例】之后我们设置三个功能键，这就需要 h5 web 储存的常识，这里只是简单的用 localstorage 记住了 img 的left 和 top；点击 but1 记住，点击but2 付与；点解 but3 恢复初始（这里直接赋值了，偷懒了。。。）

注重事项小我进修经验，仅作分享；

以上内容就是用 js 实现键盘控制图片移动的事例的内容啦，希望对你有所帮助哦！

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

猜你喜欢