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

 时间:2024-10-17 22:47:49

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

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

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

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

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

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

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

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

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

用 js 实现键盘控制图片移动的事例
  • html+css制作页面右下方固定按钮
  • 如何设置Java窗体的图标
  • jquery实现鼠标移到文字上时改变文字内容
  • 如何使用bootstrap制作三列布局
  • JS 点击链接不跳转的方法
  • 热门搜索
    学法懂法守法手抄报 万圣节手抄报英语 孝德手抄报 读书小报手抄报图片 名言警句手抄报 圣诞节手抄报英语 保护眼睛的手抄报 关于菊花的手抄报 汉字的来历手抄报 关于运动的手抄报