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 恢复初始(这里直接赋值了,偷懒了。。。)